事件相关 - 掘金

事件：event

事件三部分构成： 1.事件源（谁触发的事件） 2.事件类型（click）3.事件函数
事件对象兼容性

var event = e || window.event; //事件对象的一个兼容

参数
- type:事件类型
- button：事件方法 0左键 1滚轮 2右键

三个坐标(x,y)

  -   clientX、clientY 鼠标相对浏览器窗口的x和y
  -   offsetX、offsetY 鼠标相对于自身元素的x和y
  -   pageX、pageY 鼠标相对于页面的x和y的距离

元素相关内容

  -   offsetWidth / offsetHeight : 自身宽高 + padding + border
  -   clientWidth /clientHeight: 自身的宽高 +padding
  -   offsetTop 、 offsetLeft ：
      -   父级没有相对定位 ： 相对页面的左边距和上边距
      -   父级有相对定位： 相对于定位父级左边距和上边距
  -   clientTop、clientLeft： 上边border的宽度 和左边border的宽度

常见的事件
1.鼠标事件2.键盘事件3.浏览器事件（BOM）4.移动端事件5.表单事件6.其他事件

- 鼠标事件

    -   click 鼠标左键
    -   dblclick鼠标双击
    -   contextmenu鼠标右键
    -   wheel滚轮
    -   mousemove 鼠标在元素上移动的时候触发 (不停的触发)
    
    -   mouseover鼠标按下的时候触发 (按鼠标的左键)  进出数据都有
    -   moouseout鼠标移除一个元素的时候触发     进出数据都有
    
    -   mouseenter鼠标进入一个元素的时候触发
    -   mouseleave鼠标离开一个元素的时候触发
    
    -   mousedown鼠标按下的时候触发 (按鼠标的左键)
    -   mouseup鼠标抬起的时候

- 键盘事件

    -   keyup键盘抬起
    -   keydown键盘按下
    -   keypress键盘按下抬起
    -   keyCode：事件对象里的 `event.keyCode`
        -   keyCode ：Ascii 码
        -   keyCode ： `event.keyCode || event.which`;
    -   组合按钮
        -   事件对象里有 altKey /ctrlKey /shiftKey : 如果是true 就是按了对应组合按钮 否则就没有按
        ```
        event.altKey  
        event.ctrlKey
        event.shiftKey
        ```

1、如何区分具体的按键

document.onkeyup=function(e){
var event=e ||window.event;
console.log(event.keyCode);
var keyCode=event.keyCode||event.which;
if(keyCode==65){
         console.log("点击了a按键")
}
}

2、组合按钮 : 事件对象里提供组合按钮的属性

- 表单事件

    -   change
    -   input
    -   focus
    -   blur

 //1.change： 表单内容改变的时候触发  
        // var inputEle = document.querySelector(".inp");
        // inputEle.onchange = function(){
        //     console.log("表单改变了");
        // }
// 2.input ：当表单输入的时候触发 
        // var inputEle = document.querySelector(".inp");
        // inputEle.oninput = function(){
        //     console.log("输入了值",this.value);
        // }
// 3.focus事件： 聚焦的时候触发;
        // focus函数 
        // var inputEle = document.querySelector(".inp");
        // inputEle.onfocus = function(){
        //     console.log("聚焦了");
        // }
        // document.querySelector("button").onclick = function(){
        //     inputEle.focus();
        // }
// 4.blur:失去焦点的时候触发  
        var inputEle = document.querySelector(".inp");
        // inputEle.onblur = function(){
        //     console.log("失去焦点的时候触发");
        // }
        inputEle.onchange = function(){
            console.log("失去焦点的时候触发");
        }
       
// blur 和change事件 区别 ： blur 是只要失去焦点就会触发 ；change 失去焦点的时候输入框有改变
        document.querySelector(".checkEle").onchange = function(){
            // console.log("改变了");
             console.log("改变了",this.checked);
         }
        document.querySelector("#mysel").onchange = function(){
           console.log(this.value);
        }

- 移动端事件

// 移动端事件  ：1.触摸开始touchstart  2. 正在触摸touchmove 3.触摸结束 touchend
 document.ontouchstart = function(){
 console.log("触发事件开始");
}
 document.ontouchmove = function(){
 console.log("触摸进行");
 }
 document.ontouchend = function(){
 console.log("触摸结束");
 }

- 其他事件

1、过渡结束transitionend 2、动画结束时触发animationend

绑定事件

绑定事件方式一：onclick只能绑定一个事件

 var btn = document.querySelector("button");

btn.onclick = function(){
console.log(111);
 }
btn.onclick = function(){
console.log(222);
}

绑定事件方式二：添加事件监听 addEventListener 1.可以绑定多个事件2.事件名不需要加on修饰符

 btn.addEventListener("click",function(){
 console.log(111);
 }) 
 btn.addEventListener("click",function(){
 console.log(2222);
 })

兼容性问题 attchEvent 来绑定：需要加上on修饰符

// addEventListener 兼容问题 ： Chrome 和 ie8以上浏览器
// IE8或者以下attachEvent : 注意 需要加 on
 btn.attachEvent("onclick",function(){
       console.log("111");
 })
 // 兼容函数
function bindEvent(ele,eventName,fn){
if(window.addEventListener){
        ele.addEventListener(eventName,fn);
     }else{
        ele.attachEvent("on"+eventName,fn);
}
}
        bindEvent(btn,"click",function(){
           console.log("点击了");
})

总结：区别：onclick是只能绑定一个事件；addEventListener有两个特点 1.可以绑定多个事件 2.事件名不需要"on"修饰符;兼容性问题 attchEvent 来绑定：需要加上on修饰符