事件

2021-04-19 142 阅读3分钟

绑定事件处理函数

elem.onxxxx=function (event) {} 【兼容性好，一个对象的一个事件只能绑定一个处理函数】
elem.addEventListener(type,fn,false); 【IE9以下不兼容，可以给一个对象的一个事件绑定多个处理函数】【参数：事件类型，处理函数，false】
elem.attachEvent('on' + type, fn); 【IE独有，一个事件可以绑定多个处理函数】【参数类型：'on'+事件类型，处理函数】【程序this指向window】

//给一个dom对象添加一个该事件类型的处理函数
//封装addEvent(elem,type,handle);兼容性方法
function addEvent(){
    if(elem.addEventLister){
        elem.addEventLister(type, handle, false);
    }else if(elem.attachEvent){
        elem.attacjEvent('on' + type, function(){
            handle.call(elem)
        })
    }else{
        elem['on' + type] = handle;
    }
}

解除事件处理函数

ele.onxxxx = null;
ele.removeEventLister(type, fn, false);【参数要与要解除的事件处理函数一致】
ele.detachEvent('on' + type, fn); 【如果绑定匿名函数，无法解除，因为在解除时找不到这个函数】

事件冒泡、捕获

结构上嵌套关系的元素，会存在事件冒泡功能，即同一事件，自子元素冒泡向父元素（自底向上）

结构上嵌套关系的元素，会存在事件捕获功能，即同一事件，自父元素捕获至子元素（自顶向下） IE没有捕获事件

触发顺序，先捕获，后冒泡。
focus, blur, change, submit, reset, select等事件不冒泡。
上述方法中的参数“false”改为“true”可触发捕获（“false”是冒泡，所以不能同时存在在一个函数中）。
一个元素冒泡和捕获都绑定在一个事件上，执行这个事件时顺序是先捕获后冒泡【事件执行的顺序是谁先绑定谁先执行】。

取消冒泡

事件对象，系统会传的一个参数，把一些数据存在其中，比如事件类型，发生时刻，鼠标坐标。这个对象上有个方法，可以取消冒泡。

event.stopPropagation();【不支持IE9以下版本】
event.canaelBubble = true;【IE独有】

//封装取消冒泡的函数
function stopBubble(event){
    if(event.stopPropagation) {
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

阻止默认事件

表单提交、a标签跳转、右键菜单等

return false; 【以对象属性的方式注册的事件才生效】
event.preventDefault(); 【W3C标准 IE9以下不兼容】
event.returnValue = false; 【兼容IE】

//封装阻止默认事件的函数
function cancelHandler(event) {
     if(event.preventDefault) {
         event.preventDefult();
     }else{
         event.returnValue = false;
     }
}

<a href="javascript:void(0)">demo</a>也可以取消默认事件

事件对象

获取事件对象 var e = event || window.event【用于IE】
事件对象上有个属性可以知道是哪个元素触发的事件，事件源对象【触发事件的元素】。event.target【火狐】event.srcElement【IE】，chrome两个属性都有。获取事件源对象 var target = event.target || event.srcElement

事件委托

利用事件冒泡和事件源对象进行处理

不需要循环所有的元素一个个绑定事件。
当有新的子元素时不需要重新绑定事件。

比如，如果有多个子元素需绑定相同功能的函数，那就可以绑定在父级元素上，就不必一个一个去子元素上绑定事件。