Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

element.addEventListener

random notes:

  • I think the "traditional" way should be on a separate page discussing events.
  • The "this" section should be updated to explicitly warn about a common var myObject = {listener: function() { this.doStuff() }, doStuff: function() {alert("yay")} }; addEventListener("load", myObject.listener, false); mistake.
  • registering/removing anonymous functions listeners
  • listener as an object implementing the interface (with possible uses)
  • fourth param, useful for chrome code.

I hope to remember to add this later this week. --Nickolay 14:24, 28 March 2006 (PST)

I know that in Gecko at least, even if you just add a javascript function event listener, it is passed the event, so you can use something like:

function modifyText(aEvent) {
  aEvent.target.nodeValue = "pants";
}

to get hold of the object. I'm not sure if that's a Gecko bug or some specification in the DOM though.

--DigDug 10:21, 14 Feb 2008 (CST)

 

The "Memory issues" section makes it sound like using an anonymous function fixes memory issues, which is incorrect. In fact anonymous functions cause those issues. Also, it says "Calling removeEventListener or removing all references to an anonymous function". That "or" should probably be "and" instead.

That section should probably be rewritten.

--biesi

 

The "Memory issues" section contains an incorrect statement thay says an anynomous event listener cannot be removed:

When adding an event listener in this manner be sure it is added only once, it is permanent (can not be removed) until the object it was added to is destroyed.

The listener can be removed using the arguments.callee property. Try this in your location bar:

javascript:document.addEventListener("click",function(){if(confirm("Remove?"))document.removeEventListener("click",arguments.callee,false);},false);alert("Click anywhere on the page.");

--

 

I think the example provided for addEventListener could be much simpler and explicative.
My proposal is:

Example

<div id="ear">Click me</div>
<div id="display"></div>

<script>

  var ear = document.getElementById('ear');
  ear.addEventListener("click", listener, false);

  function listener() {
    document.getElementById('display').innerHTML = "blah blah";
  }

</script>

jsfiddle.net/xfFMk

The argument of a listener function is an instance of the Event itself (in this case a "Mouse Event"), that contains useful information like for example

  • event.type : click, onmouseover etc.
  • event.clientX
    the horizontal coordinate of click in browser window
    event.target
    the element to wich the listener is assigned, in this example the <div> ear
<script>

  var ear = document.getElementById('ear');
  ear.addEventListener("click", listener, false);

  function listener(event) {
    document.getElementById('display').innerHTML = event.type;  // displays "click"
  }

</script>

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

<script>

  var ear = document.getElementById('ear');
  ear.addEventListener("click", function(){listener("blah")}, false);

  function listener(text) {
    document.getElementById('display').innerHTML = text;
  }

</script>


-- Michele, 6 Jun 2012

Document Tags and Contributors

 Contributors to this page: wtf, Biesi, Yaroukh, Wjjohnst, Nickolay
 Last updated by: michelesalvador,