mozilla
Your Search Results

    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: Yaroukh, Nickolay, Wjjohnst, Biesi, michelesalvador, wtf
    Last updated by: michelesalvador,