addEventListener方法，W3C 标准，

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();
};

作者：素弥
链接：https://www.jianshu.com/p/205dcbbd1722
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

addEventListener方法，W3C 标准，

语法

参数

特性

移除方法

阻止事件冒泡

猜你喜欢