2.3事件绑定中的addEventListener()方法

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指向当前元素

btn.addEventListener('click',function(){
    console.log(this);      //
},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);
};

注意：

1. 该方法无法移除匿名函数的事件绑定
   故在使用该方法时事件处理函数最好为命名函数

btn.addEventListener('click',function(){
    console.log(1);    //这里重复点击还是会在控制台输出1
},false);
btn.removeEventListener('click',function(){
    console.log(1);
},false);

2. 该方法移除时，所有参数必须相同

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