EventTarget方法：addEventListener()

该EventTarget方法addEventListener()设置一个函数，只要将指定的事件传递给目标，就会调用该函数。共同目标是Element,, Document和Window，但目标可以是支持事件的任何对象（例如XMLHttpRequest）。

addEventListener()通过向调用它的EventTarget上的指定事件类型的事件侦听器列表添加实现EventListener的函数或对象来工作。

语法

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

参数部分

type

一个区分大小写的字符串，表示要侦听的事件类型。

listener

当发生指定类型的事件时接收通知（实现Event接口的对象）的对象。这必须是实现EventListener接口的对象，或JavaScript函数。

options （可选）

一个options对象，它指定有关事件侦听器的特征。可用选项包括：

• capture：Boolean，表示在将这种类型的事件将被调度到已注册的listener，在被调度到DOM树下面的任何EventTarget之前。
• once：Boolean，表示listener应该在添加后最多调用一次。如果为true，则会在调用时自动删除listener。
• passive：Boolean，如果为true，则表示由listener指定的函数永远不会调用preventDefault()。如果被动侦听器进行了调用preventDefault()，则除了生成控制台警告之外，用户代理将不执行任何操作。
•  mozSystemGroup：Boolean，表示应将侦听器添加到系统组。仅适用于在XBL中运行的代码或Firefox浏览器的chrome中。

useCapture （可选）

一个Boolean，指示是否在将这种类型的事件将被调度到已注册的listener，在被调度到DOM树下面的任何EventTarget之前。向上冒泡树的事件不会触发指定使用捕获的侦听器。当两个元素都已为该事件注册了句柄时，事件冒泡和捕获是两种传播事件的方式，这些事件发生在嵌套在另一个元素中的元素中。事件传播模式确定元素接收事件的顺序。如果未指定，则useCapture默认为false。

注意：对于附加到事件目标的事件侦听器，事件处于目标阶段，而不是捕获和冒泡阶段。无论useCapture参数如何，目标阶段中的事件将按照它们注册的顺序触发元素上的所有侦听器。

注意： useCapture并非总是可选的。理想情况下，您应该将其包含在最广泛的浏览器兼容性中。

wantsUntrusted 

Firefox（Gecko）特有的参数。如果为true，侦听器接收由Web内容调度的合成事件（在浏览器chrom中默认为false，常规网页中默认是true）。此参数对于加载项中的代码以及浏览器本身很有用。

返回值部分

undefined

使用说明

事件监听器回调部分

事件侦听器可以指定为回调函数或实现EventListener的对象，其handleEvent()方法用作回调函数。

回调函数本身具有与handleEvent()方法具有相同的参数和返回值；也就是说，回调接受一个参数：一个基于Event描述已发生事件的对象，它不返回任何内容。

例如，可以使用一个事件处理程序回调同时处理fullscreenchange和fullscreenerror，可能是如下所示：

function eventHandler(event) {
  if (event.type == fullscreenchange) {
    /* handle a full screen toggle */
  } else /* fullscreenerror */ {
    /* handle a full screen toggle error */
  }
}

安全地检测选项支持部分

在旧版本的DOM规范中，第三个参数addEventListener()是一个布尔值，指示是否使用捕获。随着时间的推移，很明显需要更多的选择。不是向函数添加更多参数（在处理可选值时使事情变得非常复杂），而是将第三个参数更改为一个对象，该对象可以包含定义选项值的各种属性，以配置删除事件侦听器的过程。

因为旧版浏览器（以及一些不太旧的浏览器）仍假设第三个参数是布尔值，所以您需要构建代码以智能地处理此场景。您可以通过对您感兴趣的每个选项使用特征检测来执行此操作。

例如，如果要检查passive选项：

var passiveSupported = false;

try {
  var options = {
    get passive() { // This function will be called when the browser
                    //     attempts to access the passive property.
      passiveSupported = true;
    }
  };

  window.addEventListener("test", options, options);
  window.removeEventListener("test", options, options);
} catch(err) {
  passiveSupported = false;
}

这将创建一个具有该passive属性的getter函数的options对象；getter设置一个标志，passiveSupported，如果它被调用，则passiveSupported为true。这意味着如果浏览器检查对象passive上options属性的值，passiveSupported则将其设置为true；否则，它将保持为false。然后我们调用addEventListener()来设置假的事件处理程序，指定这些选项，以便在浏览器将对象识别为第三个参数时检查选项。然后，我们调用removeEventListener()给自己清理。（注意，handleEvent()在未调用的事件侦听器上会被忽略。）

您可以通过这种方式检查是否支持任何选项。只需使用类似于上面显示的代码为该选项添加一个getter。

然后，当您想要创建使用相关选项的实际事件侦听器时，您可以执行以下操作：

someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
                               ? { passive: true } : false);

这里我们为someElement元素上的mouseup事件添加一个监听器。对于第三个参数，如果passiveSupported是true，我们指定一个passive设置为true的options对象；否则，我们知道我们需要传递一个布尔值，并且我们传递false作为useCapture参数的值。

如果您愿意，可以使用Modernizr或Detect It等第三方库为您进行此测试。

示例

添加一个简单的监听器

此示例演示如何使用addEventListener()监视鼠标对元素的单击。

HTML

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

JavaScript

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

在此代码中，modifyText()是使用addEventListener()注册的click事件的侦听器。单击表格中的任何位置都会冒泡到处理程序，并运行modifyText()。

事件监听anonymous函数

在这里，我们将看看如何使用anonymous函数将参数传递给事件监听器。

HTML

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

JavaScript

// Function to change the content of t2
function modifyText(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}
 
// Function to add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", function(){modifyText("four")}, false);

请注意，侦听器是一个匿名函数，它封装了代码，然后代码可以向modifyText()函数发送参数，该函数负责实际响应事件。

具有arrow功能的事件监听器

此示例演示了使用arrow函数表示法实现的简单事件侦听器。

HTML

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

JavaScript

// Function to change the content of t2
function modifyText(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}
 
// Add event listener to table with an arrow function
var el = document.getElementById("outside");
el.addEventListener("click", () => { modifyText("four"); }, false);

请注意，虽然anonymous和arrow函数相似，但它们具有不同的this绑定。虽然anonymous（和所有传统的JavaScript函数）创建自己的this绑定，但arrow函数继承了包含函数的this绑定。

这意味着当使用arrow函数时，包含函数可用的变量和常量也可用于事件处理程序。

选项用法示例

HTML

<div class="outer">
    outer, once & none-once
    <div class="middle" target="_blank">
        middle, capture & none-capture
        <a class="inner1" href="https://www.mozilla.org" rel="external nofollow" target="_blank"  target="_blank">
            inner1, passive & preventDefault(which is not allowed)
        </a>
        <a class="inner2" href="https://developer.mozilla.org/" rel="external nofollow" target="_blank"  target="_blank">
            inner2, none-passive & preventDefault(not open new page)
        </a>
    </div>
</div>

CSS

    .outer, .middle, .inner1, .inner2 {
        display:block;
        width:520px;
        padding:15px;
        margin:15px;
        text-decoration:none;
    }
    .outer{
        border:1px solid red;
        color:red;
    }
    .middle{
        border:1px solid green;
        color:green;
        width:460px;
    }
    .inner1, .inner2{
        border:1px solid purple;
        color:purple;
        width:400px;
    }

JavaScript

    let outer  = document.getElementsByClassName('outer') [0];
    let middle = document.getElementsByClassName('middle')[0];
    let inner1 = document.getElementsByClassName('inner1')[0];
    let inner2 = document.getElementsByClassName('inner2')[0];

    let capture = {
        capture : true
    };
    let noneCapture = {
        capture : false
    };
    let once = {
        once : true
    };
    let noneOnce = {
        once : false
    };
    let passive = {
        passive : true
    };
    let nonePassive = {
        passive : false
    };
    
    
    outer .addEventListener('click', onceHandler, once);
    outer .addEventListener('click', noneOnceHandler, noneOnce);
    middle.addEventListener('click', captureHandler, capture);
    middle.addEventListener('click', noneCaptureHandler, noneCapture);
    inner1.addEventListener('click', passiveHandler, passive);
    inner2.addEventListener('click', nonePassiveHandler, nonePassive);

    function onceHandler(event)
    {
        alert('outer, once');
    }
    function noneOnceHandler(event)
    {
        alert('outer, none-once, default');
    }
    function captureHandler(event)
    {
        //event.stopImmediatePropagation();
        alert('middle, capture');
    }
    function noneCaptureHandler(event)
    {
        alert('middle, none-capture, default');
    }
    function passiveHandler(event)
    {
        // Unable to preventDefault inside passive event listener invocation.
        event.preventDefault();
        alert('inner1, passive, open new page');
    }
    function nonePassiveHandler(event)
    {
        event.preventDefault();
        //event.stopPropagation();
        alert('inner2, none-passive, default, not open new page');
    }

在options对象中使用特定值之前，最好确保用户的浏览器支持它，因为这并非所有浏览器都支持的附加功能。

其他说明

为何使用addEventListener？

addEventListener()是注册W3C DOM中指定的事件侦听器的方法。好处如下：

• 它允许为事件添加多个处理程序。这对于AJAX库，JavaScript模块或需要与其他库/扩展很好地协作的任何其他类型的代码特别有用。
• 当监听器被激活时（捕获与冒泡），它可以让您对阶段进行更精细的控制。
• 它适用于任何DOM元素，而不仅仅是HTML元素。

注册事件侦听器的另一种旧方法如下所述。

在事件发送部分添加侦听器

如果在处理事件的过程中向EventTarget添加了一个EventListener，则该事件不会触发侦听器。但是，在事件流的后期阶段（例如冒泡阶段）可能会触发相同的侦听器。

多个相同的事件监听器

如果在有相同参数的相同EventTarget上注册了多个相同的EventListener s ，则丢弃重复的实例。它们不会导致EventListener被调用两次，并且不需要使用该removeEventListener()方法手动删除它们。但请注意，当使用anonymous函数作为处理程序时，这样的侦听器将不相同，因为anonymous函数是不相同的，即使使用简单地重复调用的SAME不变的源代码定义，即使在循环中也是如此。然而，在这种情况下重复定义相同的命名函数可能更成问题。

this处理程序部分中的值

通常需要引用触发事件处理程序的元素，例如对一组类似元素使用泛型处理程序时。

如果使用addEventListener()将处理程序函数附加到元素，则处理程序内部的this值是对元素的引用。它与传递给处理程序的event参数的currentTarget属性值相同。

如果在HTML源代码中的元素上指定了事件处理程序（例如，onclick），则属性值中的JavaScript代码将有效地包装在处理函数中，该函数以与addEventListener() 一致的方式绑定this值。this代码中出现的内容表示对元素的引用。请注意，this函数内部的值（由属性值中的代码调用）的行为与标准规则相同。这在以下示例中显示：

<table id="t" onclick="modifyText();">
  . . .

带有modifyText()的this的值是对全局对象Window的引用（或者在严格模式的情况下的undefined）。

使用bind()指定this

该Function.prototype.bind()方法允许您指定应该用于对给定函数的所有调用的this值。这使您可以轻松绕过不清楚this将要发生什么的问题，具体取决于调用函数的上下文。但请注意，您需要保留对侦听器的引用，以便稍后将其删除。

这是一个有和没有bind()的例子：

var Something = function(element) {
  // |this| is a newly created object
  this.name = 'Something Good';
  this.onclick1 = function(event) {
    console.log(this.name); // undefined, as |this| is the element
  };
  this.onclick2 = function(event) {
    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
  };
  element.addEventListener('click', this.onclick1, false);
  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
}
var s = new Something(document.body);

另一个解决方案是使用一个特殊的函数handleEvent()来捕获任何事件：

var Something = function(element) {
  // |this| is a newly created object
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good', as this is bound to newly created object
    switch(event.type) {
      case 'click':
        // some code here...
        break;
      case 'dblclick':
        // some code here...
        break;
    }
  };

  // Note that the listeners in this case are |this|, not this.handleEvent
  element.addEventListener('click', this, false);
  element.addEventListener('dblclick', this, false);

  // You can properly remove the listeners
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}
var s = new Something(document.body);

处理对this的引用的另一种方法是向EventListener传递一个函数，该函数调用包含需要访问的字段的对象的方法：

class SomeClass {

  constructor() {
    this.name = 'Something Good';
  }

  register() {
    var that = this;
    window.addEventListener('keydown', function(e) {return that.someMethod(e);});
  }

  someMethod(e) {
    console.log(this.name);
    switch(e.keyCode) {
      case 5:
        // some code here...
        break;
      case 6:
        // some code here...
        break;
    }
  }

}

var myObject = new SomeClass();
myObject.register();

旧版Internet Explorer和attachEvent

在IE 9之前的Internet Explorer版本中，您必须使用attachEvent()而不是标准addEventListener()。对于IE，我们将前面的示例修改为：

if (el.addEventListener) {
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', modifyText);
}

attachEvent()有一个缺点：this的值将是window对象的引用，而不是引发它的元素。

该attachEvent()方法可以与onresize事件配对以检测何时调整网页中的某些元素的大小。专门的mselementresize事件与注册事件处理程序的addEventListener方法配合使用时，提供与onresize调整某些HTML元素大小时相同的功能。

兼容性

通过在脚本开头使用以下代码，您可以解决addEventListener()，removeEventListener()，Event.preventDefault()，和Event.stopPropagation()不被Internet Explorer 8支持的问题。该代码支持使用handleEvent()和DOMContentLoaded事件。

注意：useCapture不支持，因为IE 8没有任何替代方法。以下代码仅添加了IE 8支持。此IE 8 polyfill仅适用于标准模式：需要doctype声明。

(function() {
  if (!Event.prototype.preventDefault) {
    Event.prototype.preventDefault=function() {
      this.returnValue=false;
    };
  }
  if (!Event.prototype.stopPropagation) {
    Event.prototype.stopPropagation=function() {
      this.cancelBubble=true;
    };
  }
  if (!Element.prototype.addEventListener) {
    var eventListeners=[];
    
    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
      var self=this;
      var wrapper=function(e) {
        e.target=e.srcElement;
        e.currentTarget=self;
        if (typeof listener.handleEvent != 'undefined') {
          listener.handleEvent(e);
        } else {
          listener.call(self,e);
        }
      };
      if (type=="DOMContentLoaded") {
        var wrapper2=function(e) {
          if (document.readyState=="complete") {
            wrapper(e);
          }
        };
        document.attachEvent("onreadystatechange",wrapper2);
        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
        
        if (document.readyState=="complete") {
          var e=new Event();
          e.srcElement=window;
          wrapper2(e);
        }
      } else {
        this.attachEvent("on"+type,wrapper);
        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
      }
    };
    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
      var counter=0;
      while (counter<eventListeners.length) {
        var eventListener=eventListeners[counter];
        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
          if (type=="DOMContentLoaded") {
            this.detachEvent("onreadystatechange",eventListener.wrapper);
          } else {
            this.detachEvent("on"+type,eventListener.wrapper);
          }
          eventListeners.splice(counter, 1);
          break;
        }
        ++counter;
      }
    };
    Element.prototype.addEventListener=addEventListener;
    Element.prototype.removeEventListener=removeEventListener;
    if (HTMLDocument) {
      HTMLDocument.prototype.addEventListener=addEventListener;
      HTMLDocument.prototype.removeEventListener=removeEventListener;
    }
    if (Window) {
      Window.prototype.addEventListener=addEventListener;
      Window.prototype.removeEventListener=removeEventListener;
    }
  }
})();

较旧的方式来注册事件监听器

addEventListener()是随着DOM 2 Events规范引入的。在此之前，事件监听器注册如下：

// Passing a function reference — do not add '()' after it, which would call the function!
el.onclick = modifyText;

// Using a function expression
element.onclick = function() {
  // ... function logic ...
};

如果有click的话，此方法将替换元素上的现有click事件侦听器。其他事件和相关的事件处理程序（如blur（onblur）和keypress（onkeypress））的行为类似。

因为它本质上是DOM 0的一部分，所以这种添加事件监听器的技术得到了广泛的支持，并且不需要特殊的跨浏览器代码。它通常用于动态注册事件侦听器，除非需要额外的addEventListener()功能。

内存问题

var i;
var els = document.getElementsByTagName('*');


// Case 1
for(i=0 ; i<els.length ; i++){
  els[i].addEventListener("click", function(e){/*do something*/}, false);
}


// Case 2
function processEvent(e){
  /*do something*/
}

for(i=0 ; i<els.length ; i++){
  els[i].addEventListener("click", processEvent, false);
}

在上面的第一种情况中，每次迭代循环都会创建一个新的（匿名）处理函数。在第二种情况下，相同的先前声明的函数被用作事件处理程序，这导致较小的内存消耗，因为只创建了一个处理函数。此外，在第一种情况下，无法调用removeEventListener()，因为不保留对anonymous函数的引用（或者这里，不保留循环可能创建的任何多个anonymous函数。）；在第二种情况下，可以执行myElement.removeEventListener("click", processEvent, false) 因为processEvent是函数引用。 

实际上，关于内存消耗，缺乏保留函数引用不是真正的问题；而是缺乏保持STATIC函数引用。在下面的两个问题情况中，都保留了函数引用，但由于它在每次迭代时重新定义，因此它不是静态的。在第三种情况下，每次迭代都会重新分配对anonymous函数的引用。在第四种情况下，整个函数定义是不变的，但它仍然被重复定义为new（除非它被编译器[[promote]]，因此不是静态的。因此，尽管看起来只是[[Multiple identical event listeners]]，但在这两种情况下，每次迭代都会创建一个新的侦听器，它具有对处理函数的唯一引用。但是，由于函数定义本身不会改变，

同样在这两种情况下，由于函数引用被保留但每次添加都重复定义，上面的remove-statement仍然可以删除一个侦听器，但现在只添加了最后一个。

// For illustration only: Note "MISTAKE" of [j] for [i] thus causing desired events to all attach to SAME element

// Case 3
for(var i=0, j=0 ; i<els.length ; i++){
  /*do lots of stuff with j*/
  els[j].addEventListener("click", processEvent = function(e){/*do something*/}, false);
}

// Case 4
for(var i=0, j=0 ; i<els.length ; i++){
  /*do lots of stuff with j*/
  function processEvent(e){/*do something*/};
  els[j].addEventListener("click", processEvent, false); 
}

使用被动侦听器提高滚动性能

根据规范，该passive选项的默认值始终为false。但是，这引入了处理某些触摸事件（以及其他）的事件侦听器在尝试处理滚动时阻止浏览器的主线程的可能性，从而导致滚动处理期间性能可能大大降低。

为了避免这个问题，一些浏览器（具体而言，Chrome和Firefox）已经将文档级节点Window，Document和Document.body中的touchstart和touchmove事件的passive选项的默认值更改为true。这可以防止调用事件侦听器，因此在用户滚动时无法阻止页面呈现。

注意：如果您需要知道哪些浏览器（或这些浏览器的哪些版本）实现了这种更改的行为，请参阅下面的兼容性表。

您可以通过显式设置passiveto的值为false来覆盖此行为，如下所示：

/* Feature detection */
var passiveIfSupported = false;

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

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

在不支持addEventListener()的options参数的旧浏览器上，尝试使用它会阻止useCapture参数的使用，而无需正确使用特性检测。

对于基本scroll事件，您无需担心passive的值。由于无法取消，因此事件侦听器无法阻止页面呈现。

规范

浏览器兼容性