JavaScript，事件注册器addEventListener和removeEventListener

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文中，苏南大叔将对js的EventListener进行深度解析。这个EventListener函数相对而言，是不常用的。因为普通的页面里面，一般就直接写on事件了，或者使用jquery写on系列事件。

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：谷歌浏览器。

addEventListener和removeEventListener

首先说最简单常见的使用场景，就是注册事件和移除事件。例子如下：

var c0 = document.getElementById("c0");
var onClick = function(e){
    console.log("click");
}
c0.addEventListener("click", onClick);
c0.removeEventListener("click", onClick);

如果事件仅仅用来注册，而不会用来移除的话。那么，使用一个匿名函数也无可厚非。但是，您的事件函数还准备会用来移除的话，就不能这样做，因为任何匿名事件函数都不能被移除。

下面的例子，表面上看和上一个例子一样的效果。但是事实上，注册上的click匿名事件永远不能被移除。

var c0 = document.getElementById("c0");
c0.addEventListener("click", function(e){
    console.log("click");
});
// 移除失败
c0.removeEventListener("click", function(e){
    console.log("click");
});

也就是说，最好最标准的使用方式是：
先定义好函数，这个函数就接收一个参数event。然后再addEventListener，适当的时候再removeEventListener。

remove的时候，必须每个参数都和add的时候对应上，才能被删除。

事件添加自定义参数

从上述的代码中可以看出，被注册的事件就只有一个参数event，并且在注册的时候，并不体现event的存在。（没有小括号内的表述字样）。

那么，如果这个事件需要个自定义参数的话，就需要多一层函数定义了。实际上就是把带自定义参数的事件做一次再包装。

var c0 = document.getElementById("c0");
var onClick = function (e, who) {
    console.log(who + ": click");
}
var onClick2 = function (e) {
    onClick(e,"苏南大叔");
}
c0.addEventListener("click", onClick2);
// c0.removeEventListener("click", onClick2);

更多参数

注册事件函数addEventListener实际上还有个第三个参数，就是控制事件的传递方向。默认情况下，这个参数的是false，也就是不使用capture，事件是冒泡传递的，也就是从内到外进行扩散的。

addEventListener(type, listener, useCapture);

甚至还有更多参数，不过用到的概率很低。

addEventListener(type, listener, options);

参考文章：

• https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
• https://newsn.net/say/js-event-order.html

获取一个对象上的所有事件

在谷歌浏览器的f12里面，专用的函数getEventListeners，普通的js里面没有。

getEventListeners(document.getElementById('c0'));

结束语

更多js相关经验文字，请点击：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。