EventTarget.addEventListener

  • Revision slug: Web/API/EventTarget.addEventListener
  • Revision title: EventTarget.addEventListener
  • Revision id: 409243
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment improve wantsUntrusted description, move the note on useCapture support closer to the parameter description

Revision Content

addEventListener() registers the specified listener on the {{domxref("EventTarget")}} it's called on. The event target may be an {{domxref("Element")}} in a document, the {{domxref("Document")}} itself, a {{domxref("Window")}}, or any other object that supports events (such as XMLHttpRequest).

Syntax

target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla only
type
A string representing the event type to listen for.
listener
The object that receives a notification when an event of the specified type occurs. This must be an object implementing the {{domxref("EventListener")}} interface, or simply a JavaScript function.
useCapture {{optional_inline}}
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation. If not specified, useCapture defaults to false.
Note: useCapture became optional only in more recent versions of the major browsers; for example, it was not optional prior to Firefox 6. You should provide this parameter for broadest compatibility.
wantsUntrusted {{Non-standard_inline}}
If true, the listener will receive synthetic events dispatched by web content (the default is false for chrome and true for regular web pages). This parameter is only available in Gecko and is mainly useful for the code in add-ons and the browser itself. See Interaction between privileged and non-privileged pages for an example.

Example

Add a simple listener

HTML Content

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

CSS Content

  #t1, #t2 { border: 2px solid gray; }
  #t2 { background-color: pink; }

JavaScript Content

// 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 t
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

{{EmbedLiveSample('addEventListenerBasic')}}

In the above example, modifyText() is a listener for click events registered using addEventListener(). A click anywhere in the table will bubble up to the handler and run modifyText().

If you want to pass parameters to the listener function, you have to use an anonymous function.

Event Listener with anonymous function

HTML Content

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

CSS Content

  #t1, #t2 { border: 2px solid gray; }
  #t2 { background-color: pink; }

JavaScript Content

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

{{EmbedLiveSample('Event_Listener_with_anonymous_function')}}

Notes

Why use addEventListener?

addEventListener is the way to register an event listener as specified in W3C DOM. Its benefits are as follows:

  • It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used.
  • It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)
  • It works on any DOM element, not just HTML elements.

The alternative, older way to register event listeners is described below.

Adding a listener during event dispatch

If an EventListener is added to an EventTarget while it is processing an event, it will not be triggered by the current actions but may be triggered during a later stage of event flow, such as the bubbling phase.

Multiple identical event listeners

If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and since the duplicates are discarded, they do not need to be removed manually with the removeEventListener method.

The value of this within the handler

It is often desirable to reference the element from which the event handler was fired, such as when using a generic handler for a series of similar elements. When attaching a function using addEventListener() the value of this is changed—note that the value of this is passed to a function from the caller.

In the example above, the value of this within modifyText() when called from the click event is a reference to the table 't'. This is in contrast to the behavior that occurs if the handler is added in the HTML source:

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

The value of this within modifyText() when called from the onclick event will be a reference to the global (window) object.

Note: JavaScript 1.8.5 introduces the Function.prototype.bind() method, which lets you specify the value that should be used as this for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can later remove it.

This is an example with and without bind:

var Something = function(element) {
  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 the binded Something object
  };
  element.addEventListener('click', this.onclick1, false);
  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
}

A problem in the example above is that you cannot remove the listener with bind. Another solution is using a special function called handleEvent to catch any events:

var Something = function(element) {
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good', as this is the Something 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 listners
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}

Legacy Internet Explorer and attachEvent

In Internet Explorer versions prior to IE 9, you have to use attachEvent rather than the standard addEventListener. To support IE, the example above can be modified to:

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

There is a drawback to attachEvent, the value of this will be a reference to the window object instead of the element on which it was fired.

Compatibility

You can work around the addEventListener, removeEventListener, Event.preventDefault and Event.stopPropagation not being supported by IE 8 using the following code at the beginning of your script. The code supports the use of handleEvent and also the DOMContentLoaded event.

Note: useCapture is not supported, as IE 8 does not have any alternative method of it. Please also note that the following code only adds support to IE 8.

(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 (listener.handleEvent) {
          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);
          }
          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;
    }
  }
})();

Older way to register event listeners

addEventListener() was introduced with the DOM 2 Events specification. Before then, event listeners were registered as follows:

// Pass 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 ...
};

This method replaces the existing click event listener(s) on the element if there are any. Similarly for other events and associated event handlers such as blur (onblur), keypress (onkeypress), and so on.

Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to register event listeners dynamically unless the extra features of addEventListener() are needed.

Memory issues

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

In the first case, a new (anonymous) function is created at each loop turn. In the second case, the same previously declared function is used as an event handler. This results in smaller memory consumption. Moreover, in the first case, since no reference to the anonymous functions is kept, it is not possible to call element.removeEventListener because we do not have a reference to the handler, while in the second case, it's possible to do myElement.removeEventListener("click", processEvent, false).

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{CompatGeckoDesktop(1.0)}} 9.0 7 1.0
useCapture made optional 1.0 6.0 9.0 11.60 {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 {{CompatGeckoMobile(1.0)}} 9.0 6.0 1.0

Gecko notes

  • Prior to Firefox 6, the browser would throw if the useCapture parameter was not explicitly false. Prior to Gecko 9.0 {{geckoRelease("9.0")}}, addEventListener() would throw an exception if the listener parameter was null; now the method returns without error, but without doing anything.

WebKit notes

  • Although WebKit has explicitly added [optional] to the useCapture parameter as recently as June 2011, it had been working before the change. The new change landed in Safari 5.1 and Chrome 13.

See also

Specification

Revision Source

<p><code>addEventListener()</code> registers the specified listener on the {{domxref("EventTarget")}} it's called on. The event target may be an {{domxref("Element")}} in a document, the {{domxref("Document")}} itself, a {{domxref("Window")}}, or any other object that supports events (such as <code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>).</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<code><em>target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
<em>target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>, <em>wantsUntrusted </em>{{Non-standard_inline}}]); // Gecko/Mozilla only</code></pre>
<dl>
  <dt>
    <code>type</code></dt>
  <dd>
    A string representing the <a href="/en-US/docs/DOM/event.type" title="DOM/Event.type">event type</a> to listen for.</dd>
  <dt>
    <code>listener</code></dt>
  <dd>
    The object that receives a notification when an event of the specified type occurs. This must be an object implementing the {{domxref("EventListener")}} interface, or simply a JavaScript <a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">function</a>.</dd>
  <dt>
    <code>useCapture</code> {{optional_inline}}</dt>
  <dd>
    If <code>true</code>, <code>useCapture</code> indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered <code>listener</code> before being dispatched to any <code>EventTarget</code> beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> for a detailed explanation. If not specified, <code>useCapture</code> defaults to <code>false</code>.
    <div class="note">
      <strong>Note:</strong> <code>useCapture</code> became optional only in more recent versions of the major browsers; for example, it was not optional prior to Firefox 6. You should provide this parameter for broadest compatibility.</div>
  </dd>
  <dt>
    <code>wantsUntrusted</code> {{Non-standard_inline}}</dt>
  <dd>
    If <code>true</code>, the listener will receive synthetic events dispatched by web content (the default is <code>false</code> for chrome and <code>true</code> for regular web pages). This parameter is only available in Gecko and is mainly useful for the code in add-ons and the browser itself. See <a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">Interaction between privileged and non-privileged pages</a> for an example.</dd>
</dl>
<h2 id="Example" name="Example">Example</h2>
<h2 id="addEventListenerBasic" name="addEventListenerBasic">Add a simple listener</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html">
&lt;table id="outside"&gt;
&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</pre>
<h3 id="CSS_Content">CSS Content</h3>
<pre class="brush: css">
  #t1, #t2 { border: 2px solid gray; }
  #t2 { background-color: pink; }
</pre>
<h3 id="JavaScript_Content">JavaScript Content</h3>
<pre class="brush: js">
// 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 t
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
</pre>
<p>{{EmbedLiveSample('addEventListenerBasic')}}</p>
<p>In the above example, <code>modifyText()</code> is a listener for <code>click</code> events registered using <code>addEventListener()</code>. A click anywhere in the table will bubble up to the handler and run <code>modifyText()</code>.</p>
<p>If you want to pass parameters to the listener function, you have to use an anonymous function.</p>
<h2 id="Event_Listener_with_anonymous_function" name="Event_Listener_with_anonymous_function">Event Listener with anonymous function</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html">
&lt;table id="outside"&gt;
&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</pre>
<h3 id="CSS_Content">CSS Content</h3>
<pre class="brush: css">
  #t1, #t2 { border: 2px solid gray; }
  #t2 { background-color: pink; }</pre>
<h3 id="JavaScript_Content">JavaScript Content</h3>
<pre class="brush: js">
// Function to change the content of t2
function modifyText(new_text) {
&nbsp; var t2 = document.getElementById("t2");
&nbsp; t2.firstChild.nodeValue = new_text;&nbsp;&nbsp; &nbsp;
}
&nbsp;
// Function to add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", function(){modifyText("four")}, false);
</pre>
<p>{{EmbedLiveSample('Event_Listener_with_anonymous_function')}}</p>
<h2 id="Notes">Notes</h2>
<h3 id="Why_use_addEventListener.3F" name="Why_use_addEventListener.3F">Why use <code>addEventListener</code>?</h3>
<p><code>addEventListener</code> is the way to register an event listener as specified in W3C DOM. Its benefits are as follows:</p>
<ul>
  <li>It allows adding more than a single handler for an event. This is particularly useful for <a href="/en-US/docs/DHTML" title="DHTML">DHTML</a> libraries or <a href="/en-US/docs/Extensions" title="Extensions">Mozilla extensions</a> that need to work well even if other libraries/extensions are used.</li>
  <li>It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)</li>
  <li>It works on any DOM element, not just HTML elements.</li>
</ul>
<p>The alternative, <a href="#Older_way_to_register_event_listeners">older way to register event listeners</a> is described below.</p>
<h3 id="Adding_a_listener_during_event_dispatch" name="Adding_a_listener_during_event_dispatch">Adding a listener during event dispatch</h3>
<p>If an <code>EventListener</code> is added to an <code>EventTarget</code> while it is processing an event, it will not be triggered by the current actions but may be triggered during a later stage of event flow, such as the bubbling phase.</p>
<h3 id="Multiple_identical_event_listeners" name="Multiple_identical_event_listeners">Multiple identical event listeners</h3>
<p>If multiple identical <code>EventListener</code>s are registered on the same <code>EventTarget</code> with the same parameters, the duplicate instances are discarded. They do not cause the <code>EventListener</code> to be called twice, and since the duplicates are discarded, they do not need to be removed manually with the <a href="/en-US/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a> method.</p>
<h3 id="The_value_of_this_within_the_handler" name="The_value_of_this_within_the_handler">The value of <code>this</code> within the handler</h3>
<p>It is often desirable to reference the element from which the event handler was fired, such as when using a generic handler for a series of similar elements. When attaching a function using <code>addEventListener()</code> the value of <code>this</code> is changed—note that the value of <code>this</code> is passed to a function from the caller.</p>
<p>In the example above, the value of <code>this</code> within <code>modifyText()</code> when called from the click event is a reference to the table 't'. This is in contrast to the behavior that occurs if the handler is added in the HTML source:</p>
<pre class="brush: html">
&lt;table id="t" onclick="modifyText();"&gt;
  . . .
</pre>
<p>The value of <code>this</code> within <code>modifyText()</code> when called from the onclick event will be a reference to the global (window) object.</p>
<div class="note">
  <strong>Note:</strong> JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code>&nbsp;method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can later remove it.</div>
<p>This is an example with and without <code>bind</code>:</p>
<pre class="brush: js">
var Something = function(element) {
  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 the binded Something object
  };
  element.addEventListener('click', this.onclick1, false);
  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
}
</pre>
<p>A problem in the example above is that you cannot remove the listener with <code>bind</code>. Another solution is using a special function called <code>handleEvent</code> to catch any events:</p>
<pre class="brush: js">
var Something = function(element) {
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good', as this is the Something 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 listners
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}
</pre>
<h3 id="Compatibility" name="Compatibility">Legacy Internet Explorer and attachEvent</h3>
<p>In Internet Explorer versions prior to IE 9, you have to use <code><a href="http://msdn.microsoft.com/en-us/library/ms536343(VS.85).aspx">attachEvent</a></code> rather than the standard <code>addEventListener</code>. To support IE, the example above can be modified to:</p>
<pre class="brush: js">
if (el.addEventListener) {
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', modifyText);
}
</pre>
<p>There is a drawback to <code>attachEvent</code>, the value of <code>this</code> will be a reference to the <code>window</code> object instead of the element on which it was fired.</p>
<h3 id="Older_way_to_register_event_listeners" name="Older_way_to_register_event_listeners">Compatibility</h3>
<p>You can work around the <code>addEventListener</code>, <code>removeEventListener</code>, <code>Event.preventDefault</code> and <code>Event.stopPropagation</code> not being supported by IE 8 using the following code at the beginning of your script. The code supports the use of <code>handleEvent</code> and also the <code>DOMContentLoaded</code> event.</p>
<div class="note">
  <p><strong>Note: </strong>useCapture is not supported, as IE 8 does not have any alternative method of it. Please also note that the following code only adds support to IE 8.</p>
</div>
<pre class="brush: js">
(function() {
&nbsp; if (!Event.prototype.preventDefault) {
&nbsp;&nbsp;&nbsp; Event.prototype.preventDefault=function() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.returnValue=false;
&nbsp;&nbsp;&nbsp; };
&nbsp; }
&nbsp; if (!Event.prototype.stopPropagation) {
&nbsp;&nbsp;&nbsp; Event.prototype.stopPropagation=function() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.cancelBubble=true;
&nbsp;&nbsp;&nbsp; };
&nbsp; }
&nbsp; if (!Element.prototype.addEventListener) {
&nbsp;&nbsp;&nbsp; var eventListeners=[];
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var self=this;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var wrapper=function(e) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.target=e.srcElement;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.currentTarget=self;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (listener.handleEvent) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; listener.handleEvent(e);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; listener.call(self,e);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (type=="DOMContentLoaded") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var wrapper2=function(e) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (document.readyState=="complete") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; wrapper(e);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.attachEvent("onreadystatechange",wrapper2);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (document.readyState=="complete") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var e=new Event();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.srcElement=window;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; wrapper2(e);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.attachEvent("on"+type,wrapper);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; };
&nbsp;&nbsp;&nbsp; var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var counter=0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; while (counter&lt;eventListeners.length) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var eventListener=eventListeners[counter];
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (type=="DOMContentLoaded") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.detachEvent("onreadystatechange",eventListener.wrapper);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.detachEvent("on"+type,eventListener.wrapper);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ++counter;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; };
&nbsp;&nbsp;&nbsp; Element.prototype.addEventListener=addEventListener;
&nbsp;&nbsp;&nbsp; Element.prototype.removeEventListener=removeEventListener;
&nbsp;&nbsp;&nbsp; if (HTMLDocument) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HTMLDocument.prototype.addEventListener=addEventListener;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HTMLDocument.prototype.removeEventListener=removeEventListener;
&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; if (Window) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Window.prototype.addEventListener=addEventListener;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Window.prototype.removeEventListener=removeEventListener;
&nbsp;&nbsp;&nbsp; }
&nbsp; }
})();</pre>
<h3 id="Older_way_to_register_event_listeners" name="Older_way_to_register_event_listeners">Older way to register event listeners</h3>
<p><code>addEventListener()</code> was introduced with the DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a> specification. Before then, event listeners were registered as follows:</p>
<pre class="brush: js">
// Pass 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 ...
};
</pre>
<p>This method replaces the existing <code>click</code> event listener(s) on the element if there are any. Similarly for other events and associated event handlers such as <code>blur</code> (<code>onblur</code>), <code>keypress</code> (<code>onkeypress</code>), and so on.</p>
<p>Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to register event listeners dynamically unless the extra features of <code>addEventListener()</code> are needed.</p>
<h3 id="Memory_issues" name="Memory_issues">Memory issues</h3>
<pre class="brush: js">
var i;
var els = document.getElementsByTagName('*');

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

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

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

</pre>
<p>In the first case, a new (anonymous) function is created at each loop turn. In the second case, the same previously declared function is used as an event handler. This results in smaller memory consumption. Moreover, in the first case, since no reference to the anonymous functions is kept, it is not possible to call <code><a href="/en-US/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener</a></code> because we do not have a reference to the handler, while in the second case, it's possible to do <code>myElement.removeEventListener("click", processEvent, false)</code>.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop(1.0)}}</td>
        <td>9.0</td>
        <td>7</td>
        <td>1.0</td>
      </tr>
      <tr>
        <td><code>useCapture</code> made optional</td>
        <td>1.0</td>
        <td>6.0</td>
        <td>9.0</td>
        <td>11.60</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatGeckoMobile(1.0)}}</td>
        <td>9.0</td>
        <td>6.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<ul>
  <li>Prior to Firefox 6, the browser would throw if the <code>useCapture</code> parameter was not explicitly <code>false</code>. Prior to Gecko 9.0 {{geckoRelease("9.0")}}, <code>addEventListener()</code> would throw an exception if the <code>listener</code> parameter was <code>null</code>; now the method returns without error, but without doing anything.</li>
</ul>
<h3 id="WebKit_notes">WebKit notes</h3>
<ul>
  <li>Although WebKit has explicitly added <code>[optional]</code> to the <code>useCapture</code> parameter <a href="http://trac.webkit.org/changeset/89781">as recently as June 2011</a>, it had been working before the change. The new change landed in Safari 5.1 and Chrome 13.</li>
</ul>
<h2 id="Specification" name="Specification">See also</h2>
<ul>
  <li><a href="/en-US/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener()</a></li>
  <li><a href="/en-US/docs/DOM/Creating_and_triggering_events" title="DOM/Creating_and_triggering_custom_events">Creating and triggering custom events</a></li>
  <li><a href="http://www.quirksmode.org/js/this.html" title="http://www.quirksmode.org/js/this.html">More details on the use of <code>this</code> in event handlers</a></li>
</ul>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">DOM Level 2 Events: EventTarget.addEventListener</a></li>
  <li><a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener">DOM Level 3 Events: EventTarget.addEventListener</a></li>
</ul>
Revert to this revision