addeventlistener绑定事件（js 判断是否存有事件 addeventlistener）
本文目录
js 判断是否存有事件 addeventlistener
原生实现无法判断是否有事件。如果确实需要请参照以下代码，另外本代码只使用于调用dom2形式加载或者移除事件功能，对应dom0类型的没有做测试。
以下代码修改了原生的Element对象，是否需要这样做，请自己酌情处理。
《!DOCTYPE html》《html》
《head lang=“en“》
《meta charset=“UTF-8“》
《title》《/title》
《script type=“text/javascript“》
/**
* 此处代码必须放到任何javascript代码之前。另外增加事件只能用addEventListener形式。
*/
(function() {
Element.prototype.eventListenerList = {};
Element.prototype._addEventListener = Element.prototype.addEventListener;
Element.prototype._removeEventListener = Element.prototype.removeEventListener;
Element.prototype.addEventListener = function(a,b,c) {
this._addEventListener(a,b,c);
if(!this.eventListenerList[a]) this.eventListenerList[a] = ;
this.eventListenerList[a].push(b);
};
Element.prototype.removeEventListener = function(a,b,c){
this._removeEventListener(a, b,c);
if(this.eventListenerList[a]){
var arr = this.eventListenerList[a];
for(var i =0;i《arr.length;i++){
if(arr[i].toString() === b.toString()){
this.eventListenerList[a].splice(i,1);
}
}
}
}
})();
//此后为测试代码。
window.onload = function(){
var dom = document.getElementById(“test“);
//增加三个监听
dom.addEventListener(“click“,function(){
console.info(“click function“);
},false);
dom.addEventListener(“click“,function(){
console.info(“click function2“);
},false);
dom.addEventListener(“click“,function(){
console.info(“click function3“);
},false);
console.log(dom.eventListenerList[“click“].length);
//读出监听的方法
var clicks = dom.eventListenerList.click;
if(clicks) clicks.forEach(function(f) {
console.log(“I listen to this function: “+f.toString());
});
//删除监听
dom.removeEventListener(“click“,function(){
console.info(“click function“);
},false);
console.log(dom.eventListenerList[“click“].length);
};
《/script》
《/head》
《body》
《button id=“test“ 》测试《/button》
《/body》
《/html》
addEventListener和on的区别
addEventListener和on的区别
为什么需要addEventListener？
先来看一个片段：
html代码
《div id=“box“》追梦子《/div》
用on的代码
1 window.onload = function(){
2 var box = document.getElementById(“box“);
3 box.onclick = function(){
4 console.log(“我是box1“);
5 }
6 box.onclick = function(){
7 box.style.fontSize = “18px“;
8 console.log(“我是box2“);
9 }
10 }
运行结果：“我是box2”
看到了吧，第二个onclick把第一个onclick给覆盖了，虽然大部分情况我们用on就可以完成我们想要的结果，但是有时我们又需要执行多个相同的事件，很明显如果用on完成不了我们想要的，那不用猜，你们肯定知道了，对！addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
用addEventListener的代码
1 window.onload = function(){
2 var box = document.getElementById(“box“);
3 box.addEventListener(“click“,function(){
4 console.log(“我是box1“);
5 })
6 box.addEventListener(“click“,function(){
7 console.log(“我是box2“);
8 })
9 }
运行结果：我是box1
我是box2
addEventListenert方法第一个参数填写事件名，注意不需要写on，第二个参数可以是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理，第三个参数可以省略，大多数情况也不需要用到第三个参数,不写第三个参数默认false
第三个参数的使用
有时候的情况是这样的
《body》
《div id=“box“》
《div id=“child“》《/div》
《/div》
《/body》
如果我给box加click事件，如果我直接单击box没有什么问题，但是如果我单击的是child元素，那么它是怎么样执行的？（执行顺序）
1 box.addEventListener(“click“,function(){
2 console.log(“box“);
3 })
4
5 child.addEventListener(“click“,function(){
6 console.log(“child“);
7 })
执行的结果：
child
box
也就是说，默认情况事件是按照事件冒泡的执行顺序进行的。
如果第三个参数写的是true，则按照事件捕获的执行顺序进行的。
1 box.addEventListener(“click“,function(){
2 console.log(“box“);
3 },true)
4
5 child.addEventListener(“click“,function(){
6 console.log(“child“);
7 })
执行的结果：
box
child
事件冒泡执行过程：
从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child-》box
事件捕获执行过程：
从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box-》child
addEventListener添加事件与普通添加事件有区别吗
在标签中直接用onclick绑定事件，相当于对象的引用，也就如果有多个标签绑定此事件函数，其实公用同一个函数对象，在此函数中用this关键字，总是指向的是此函数定义时所属的对象，而不是此标签对象，而在js中写代码绑定事件，相当于复制一份此事件函数当做此标签对象的属性，所以在函数中用this关键字，指向的是此标签对象本身。
更多文章：
2026年10月11日 08:10
易语言网页api接口怎么调用（易语言，怎么读取网页json的api）
2026年10月11日 08:00
majority of（the majority of 和 a majority of的区别以及用法例句）
2026年10月11日 07:40
2026年10月11日 07:20
2026年10月11日 06:30
2026年10月11日 06:20
2026年10月11日 05:40
another time（another time和other time的区别）
2026年10月11日 05:00
2026年10月11日 04:50
2026年10月11日 03:00
