一、addEventListener()和removeEventListener()讲解

1、addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。

2、它们都接受3个参数:如     
addEventListener("事件名" , "事件处理函数" , "布尔值");        
(注:事件名不含"on",如“click”)
现在的版本可以省略第三个参数,默认值为false
要在body上添加事件处理程序,可以使用下列代码:

document.body.addEventListener('touchmove', function (event) {
    event.preventDefault();
},false)

用法

function bodyScroll(event){
    event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll,false);
document.body.removeEventListener('touchmove',bodyScroll,false);

错误示范
共用函数不能带参数,错误用法示例:

function bodyScroll(event){
    event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll(),false);
document.body.removeEventListener('touchmove',bodyScroll(),false);

注意:

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。

这也意味着通过addEventListener()添加的匿名函数无法移除,如下面的例子所示:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
    alert(this.id);
}, false);
btn.removeEventListener("click", function () {  //无效!
    alert(this.id);
}, false);

在这个例子中,我使用addEventListener()添加一个事件处理程序。
虽然调用removeEventListener(上面看似使用了相同的参数,但实际上,
第二个参数与传入addEventListener()中的与第一个是完全不同的函数。
而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同
总结:

1:相同事件绑定和解除,需要使用共用函数;绑定和解除事件时 事件没有"on" 即onclick写成click

2:共用函数不能带参数;

大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,
这样可以最大限度地兼容各种浏览器。
最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。
如果不是特别需要,我们不建议在事件捕获阶段注册事件处理程序。
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐