今天聊一下事件监听式绑定事件;绑定事件,我刚接触到两种:一种是赋值式绑定;另一种就是监听式绑定。
赋值式绑定事件属于DOM0级事件绑定;简单方便,没有兼容问题,但是也有缺点,就是不能重复绑定相同事件。
事件监听式绑定事件属于DOM2级事件绑定:用来监听某一个行为,当行为被触发时,执行对应的函数;可以开启多个,各自监听各自,互不影响。
介绍完就该上货了:
监听式事件绑定(DOM2级事件绑定):
监听某个行为,当这个行为被触发时,执行对应事件处理函数
监听可以开启多个,各自监听各自
语法:元素.addEventListener(参数1, 参数2, 参数3)
参数1:事件类型
参数2:回调函数,表示将来的事件处理函数
参数3:布尔值,true捕获,false冒泡(默认)
代码举例:
obox.addEventListener(“click”,fn1,false);
function fn1(){
console.log(1);
}
删除事件监听:
如果在绑定事件时,能够预测到这个事件将来有可能被删除,那么就提前起好名字,方便删除;如果明确这个事件不会被删除,那就可以随便写,不用起名字
删除事件监听的方法:
元素.removeEventListener(“事件名”,“句柄(函数名)”,false);
obox.removeEventListener(“click”,fn1,false);
解决IE的兼容:
添加事件监听的方法:元素.attachEvent(参数1, 参数2)
参数1:事件类型:需要加on,如:“onclick”
参数2:回调函数,用来作为事件处理函数
删除事件监听的方法:元素.detachEvent(参数1, 参数2)
参数1:要删除的事件类型:需要加on,如:“onclick”
参数2:要删除的事件处理函数的句柄