×

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

96
素弥
2016.10.13 16:50* 字数 615

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

注意:

  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();
};
Web note ad 1