js事件 鼠标事件 键盘事件 获取键盘按键 表单事件 克隆 获取鼠标位置 获取元素尺寸和浏览器窗口尺寸

js事件

            事件：
            在某一时刻，用户(在页面)做了某一件事，给出的反馈
        事件的三要素：
            1.事件源
            2.事件类型
            3.事件处理函数
        dom 0级事件绑定     事件源.on + 事件类型 = 事件处理函数、
            弊端： 无法绑定多个同类型的事件，后边新写的事件，会覆盖掉原有的事件

        dom 2级事件绑定(事件监听)    事件源.oddEventListener('事件类型',事件处理函数,第三个参数时可选的)
        

// css
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
    </style>
    
// html
    <div></div>
    
// js
        var oDiv = document.querySelector('div');

        // 事件1被覆盖   只有事件2可以实现  
        oDiv.onclick = function(){
            console.log(1212);   // 事件被覆盖掉
        }
        oDiv.onclick = function(){
            console.log(111);
        }

        // 事件1事件2都可以实现
        oDiv.addEventListener('click', function(){
            console.log('绑定给div的第一个事件');
        })
        oDiv.addEventListener('click', function(){
            console.log('绑定给div的第二个事件');
        })

表单事件

文本框:<input type="text" id="inp">
    <script>
        
        // 表单事件 =>  不是所有的标签都可以获得焦点事件   有焦点的才会有焦点事件
        var inp = document.querySelector('#inp');
        // console.log(inp);

        // 获得焦点事件
        inp.onfocus = function(){
            console.log('当前文本框获得焦点');  
        }

        //失去焦点事件
        inp.onblur = function(){
            console.log('当前文本框失去焦点');
        }

        // 文本框内容改变时触发
        inp.onchange = function(){
            console.log('当前文本框内容被更改');
        }

        // 文本框输入内容时触发
        inp.oninput = function(){
            console.log('当前文本框正在输入内容');
        }
        
    </script>

鼠标事件

//css
        div{
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
        .a{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
// html
    <div>
        <div class="a"></div>
    </div>
    
//js
        var oDiv = document.querySelector('div');

        // 单击左键事件
        oDiv.onclick = function(){
            console.log('单击时触发');
        }

        // 双击事件   左键双击时触发
        oDiv.ondblclick = function(){
            console.log('双击时触发');
        }

        // 右键事件    右键单击
        oDiv.oncontextmenu = function(){
            console.log('右键时触发');
        }


        // 鼠标按下事件    鼠标左键按下的时候触发的(哪怕鼠标没有抬起)
        oDiv.onmousedown = function(){
            console.log(' 鼠标按下时触发');
        }

        // 鼠标抬起事件   鼠标抬起时触发(按下后抬起的瞬间触发)
        oDiv.onmouseup = function(){
            console.log('鼠标抬去时触发');
        }

        // 鼠标移入事件  鼠标移入时触发
        oDiv.onmouseover = function(){
            console.log('鼠标移入时触发');  // 移入子盒子也会触发
        }

        // 鼠标移出事件   鼠标移出时触发
        oDiv.onmouseout = function(){  // 移入子盒子时也会触发
            console.log('鼠标移出时触发');
        }

        // 鼠标移动事件  鼠标动的时候触发
        oDiv.onmousemove = function(){
            console.log('鼠标移动时触发');
        }
        
        // 鼠标移入事件2
        oDiv.onmouseenter = function(){
            console.log('鼠标移入事件2');  // 只会在移入元素时触发
        }

        // 鼠标移出事件2
        oDiv.onmouseleave= function(){
            console.log('鼠标移出事件2');  // 只会在移入元素时触发
        }

键盘事件

        键盘事件：
            document 或者 input 才会有键盘事件
            document.on键盘事件的事件类型 = function(){}

// html      <input type="text">

        // 键盘抬起事件
        document.onkeyup = function(){
            console.log('键盘抬起时触发');
        }

        // 键盘按下事件
        document.onkeydown = function(){
            console.log('键盘按下时触发');
        }

        // 键盘按下抬起事件
        document.onkeypress = function(){  // 有些特殊的按键不会触发 ctrl shift alt esc等
            console.log('键盘按下抬起时触发');
        }
        
        // 也可以这样写
        var Ipt = document.querySelector('input');
        Ipt.onkeydown = function(){
            console.log('键盘按下时触发');
        }
        

滚动事件

        // 滚动事件
        window.onload = function(){
            // 当页面所有资源加载完毕时执行
           var oDiv = document.querySelector('div');
           console.log(oDiv); 
        }

获取键盘事件

        /*
            键盘按键:
                e.key =>  返回按下的键
                e.keycode  =>  返回按下的按键的进制码
                    keycode 已经被移出  但是很多主流浏览器还支持使用
        */
        var inp = document.querySelector('#inp');
        // console.log(inp);
        inp.onkeyup = function(e){
            
            // console.log(e.key, e.keycode);   
            // console.log(e.ctrlKey);  
            // 组合键  例如：ctrl c  按下ctrl 后再按某一个键 返回true 
            // 没有按ctrl 就按某一个键 返回false

            if(e.ctrlKey && e.key == 'a'){
                console.log('此时按下了ctrl+a');
            }else if(e.ctrlKey && e.key == 'c'){
                console.log('此时按下了ctrl+c');
            }else if(e.ctrlKey && e.key == 'v'){
                console.log('此时按下了ctrl+v');
            }
        }

表单事件

// html结构       文本框:<input type="text" id="inp">

        // 表单事件 =>  不是所有的标签都可以获得焦点事件   有焦点的才会有焦点事件
        var inp = document.querySelector('#inp');
        // console.log(inp);

        // 获得焦点事件
        inp.onfocus = function(){
            console.log('当前文本框获得焦点');  
        }

        //失去焦点事件
        inp.onblur = function(){
            console.log('当前文本框失去焦点');
        }

        // 文本框内容改变时触发
        inp.onchange = function(){
            console.log('当前文本框内容被更改');
        }

        // 文本框输入内容时触发
        inp.oninput = function(){
            console.log('当前文本框正在输入内容');
        }
        

克隆

            复制克隆一个li
            被克隆元素.cloneNode(参数)
                参数为false 不克隆 
                参数为true时克隆  => 默认为true

获取鼠标位置

        var oDiv = document.querySelector('div');

        oDiv.onclick = function(e){
            
            console.log('相对于事件的X轴:', e.offsetX);
            console.log('相对于事件的Y轴:', e.offsetY);

            console.log('<<<<<<<<<<<<<<>>>>>>>>>>>>>>');
            console.log('相对于页面的X轴:', e.pageX);
            console.log('相对于页面的Y轴:', e.pageY);


            console.log('<<<<<<<<<<<<<<>>>>>>>>>>>>>>');
            console.log('相对于浏览器窗口的X轴:', e.clientX);
            console.log('相对于浏览器窗口的Y轴:', e.clientY);

        }

获取元素尺寸和浏览器窗口尺寸

        var oDiv = document.querySelector('div');

        // 1.获取元素的宽高
        // offsetXXX     =>  实际宽高 + padding + border
        console.log(oDiv.offsetWidth);   // 获取元素的宽度
        console.log(oDiv.offsetHeight);   // 获取元素的高度

        // clientXXX   =>  实际宽高 + padding
        console.log(oDiv.clientWidth);
        console.log(oDiv.clientHeight);
        
        // 2.获取浏览器窗口尺寸
        // window.innerXXX  =>  会计算页面元素溢出产生的滚动条宽高
        console.log(window.innerHeight);  // 高度
        console.log(window.innerWidth);  // 宽度

        // document.documentElement.clientXXX  =>  不会计算滚动条(只计算浏览器可视区域)
        document.documentElement.clientHeight
        document.documentElement.clientWidth