监听onclick事件

和onclick的区别 区别一 写的方法不会被覆盖 区别二 false表示冒泡（从里到外触发事件） true表示捕获 （从外到里触发事件）

     window.addEventListener('click',function(){
         alert(1)
     })
     window.addEventListener('click',function(){
         alert(2)
     })
     window.addEventListener('click',function(){
         alert(3)
     })
       let div1 = document.getElementById('div1')
    div1.onclick = function (e){
    

鼠标在文档（是文档document不是div1）的X轴的位置

        console.log(e.clientX);
        

鼠标在文档（是文档document不是div1）的Y轴的位置

        console.log(e.clientY);
         let h1 = document.querySelector('h1')
         

鼠标双击

     h1.ondblclick = function(){
         alert('我双击了')
     }
     h1.addEventListener('dblclick',function(){
         alert('我双击了')
     })
     

鼠标在指定的区域内移动事件

     h1.onmousemove = function (){
         console.log('我移动了');
     }
     h1.addEventListener('mousemove',function(){
         console.log('我移动了');
     })
     let div1 = document.getElementById('div1')
    div1.onmousedown = function (e){
    

按下的时候 获取点的位置 到盒子边界距离

        let areaX = e.clientX - div1.offsetLeft;
        let areaY =  e.clientY - div1.offsetTop;
        document.onmousemove = function (e){
        

移动的时候获取的client的动态距离 - 盒子内点的到边缘的 固定距离 最后获得的 就是 盒子到文档的距离

            div1.style.left = e.clientX - areaX + 'px'
            div1.style.top = e.clientY - areaY + 'px'
        }
    }
    div1.onmouseup = function (){
        document.onmousemove = null;
    }
      let t = document.getElementById('t');

    t.onkeydown = function (e){
    

兼容写法

        let eobj = e||event;
        

事件源对象

        console.log(eobj);
        if(eobj.keyCode == 13){
            // alert(this.value)
            alert(eobj.target.value)
        }
    }

在输入框中输入 字符 按下回车的时候 把输入的字 alert出来

键盘按下的时候触发

     t.onkeydown = function (){
         console.log('键盘我按下了');
     }
     

连续敲击的时候触发

     t.onkeypress = function (){
         console.log('连续按下键盘并抬起的时候触发');
     }
     

键盘抬起的时候触发

     t.onkeyup = function (){
         console.log('键盘我抬起了');
     }
     

顺序 onkeydown > onkeypress > onkeyup