addEventListener方法详解

前言

addEventListener方法作为注册事件的方法，而被我们广泛使用。下面我们来一起学习下这个方法，以及其中隐藏的知识点。

语法

target.addEventListener(type, listener [, options]);
target.addEventListener(type, listener [, useCapture]);
target.addEventListener(type, listener [, useCapture, wantsUntrusted  ]); // Gecko/Mozilla only

根据mdn中的api，我们可以确定，addEventListener接受三个参数。

• type(即事件类型，常见的如click, DomContentLoaded, error等)

• listener
  listener既可以是function，也可以是一个带有handleEvent方法的object对象

• options

  • capture(指定事件行为是否为捕获事件，默认为false，即冒泡)
  • once（指定事件是否只执行一次，默认为false，当为true时，只执行一次后，事件会自动被移除）
  • passive
    默认为false，当指定为true时，如果事件本身执行了preventDefault方法,用户代理将不会做任何事情，取而代之的是生成一个控制台warning。之后我们会具体介绍

常见的使用方式

<div class="btn"></div>

var btn = document.getElementById('btn')
btn.addEventListener('click', function () {
  console.log('button is click');
})

handler的this指向

element.addEventListener('click', function (e) {
  console.log(this.className)           // logs the className of my_element
  console.log(e.currentTarget === this) // logs `true`
})

提升滚动体验的参数passive

第三个参数的options.passive设置为true时，可以有效提升scroll体验，根据标准，passive的值默认为false，最新的chrome和firefox已经默认将passive设置为true，以提升scroll体验。由于IE9以下的浏览器不支持options，要使用passive需要一点hack的方式。

/* Feature detection */
let passiveIfSupported = false;

try {
  window.addEventListener("test", null, 
    Object.defineProperty(
      {}, 
      "passive", 
      {
        get: function() { passiveIfSupported = { passive: false }; }
      }
    )
  );
} catch(err) {}

window.addEventListener('scroll', function(event) {
  /* do something */
  // can't use event.preventDefault();
}, passiveIfSupported );