addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，所以，这种绑定事件的方法必须要处理浏览器兼容问题。
语法
对象.addEventListener(事件名称,事件处理函数,布尔值)
参数
-
事件名称
是一个字符串，需要加引号
-
事件处理函数（事件句柄函数）
既可以是命名函数，也可以是匿名函数
-
布尔值
- true 事件处理函数是在事件的捕获阶段发生的
- false 事件处理函数是在事件的冒泡阶段发生的（默认值，如果不写默认为false）
特性
-
可以通过第三个参数-布尔值来对事件处理函数调用的时机进行操控
-
既可以调用命名函数，也可以调用匿名函数（最好为命名函数）
btn.addEventListener('click',function(){
console.log(1);
},false);
btn.addEventListener('click',fn1,false); //调用时直接写函数名称即可
function fn1(){
console.log(1);
};
-
可以给元素添加多个事件，且不会互相覆盖
btn.addEventListener('click',function(){
console.log(1);
},false);
btn.addEventListener('click',function(){
console.log(2);
},false);
//这段代码最后会在控制台同时输出1和2
-
this指向当前元素
<body>
<input type="button">
</body>
btn.addEventListener('click',function(){
console.log(this); //<input type="button">
},false);
移除方法
对象.removeEventListener(事件名称,事件处理函数,布尔值)
- 直接移除
btn.addEventListener('click',fn1,false);
function fn1(){
console.log(1); //事件绑定被移除，无论怎么点击按钮都无法在控制台输出内容
};
btn.removeEventListener('click',fn1,false);
- 执行一次后移除
btn.addEventListener('click',fn1,false);
function fn1(){
console.log(1); //事件执行一次后被移除，只会输出一次1
btn.removeEventListener('click',fn1,false);
};
注意：
- 该方法无法移除匿名函数的事件绑定
故在使用该方法时事件处理函数最好为命名函数
btn.addEventListener('click',function(){
console.log(1); //这里重复点击还是会在控制台输出1
},false);
btn.removeEventListener('click',function(){
console.log(1);
},false);
- 该方法移除时，所有参数必须相同
btn.addEventListener('click',fn1,false);
function fn1(){
console.log(1);
};
btn.removeEventListener('click',fn1,true); //由于这里移除时第三个参数为true，与上面不同，点击后还是会输出1
阻止事件冒泡
采用事件对象.stopPropagation()方法
btn.addEventListener('click',fn1,false);
function fn1(ev){
ev.stopPropagation();
};
网友评论