element.addEventListener

  • Revision slug: Talk:DOM/element.addEventListener
  • Revision title: element.addEventListener
  • Revision id: 232713
  • Created:
  • Creator: michelesalvador
  • Is current revision? No
  • Comment proposal for a simpler example; 252 words added

Revision Content

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 event.target (the 'ear').

<script>

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

  function listener(event) {
    var text = event.target.firstChild.nodeValue;
    document.getElementById('display').innerHTML = text;  // displays "Click me"
  }

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

Revision Source

<p>random notes:</p>
<ul> <li>I think the "traditional" way should be on a separate page discussing events.</li> <li>The "this" section should be updated to explicitly warn about a common <code>var myObject = {listener: function() { this.doStuff() }, doStuff: function() {alert("yay")} }; addEventListener("load", myObject.listener, false);</code> mistake.</li> <li>registering/removing anonymous functions listeners</li> <li>listener as an object implementing the interface (with possible uses)</li> <li>fourth param, useful for chrome code.</li>
</ul>
<p>I hope to remember to add this later this week. --<a href="/User:Nickolay" title="User:Nickolay">Nickolay</a> 14:24, 28 March 2006 (PST)</p>
<p>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:</p>
<pre class="eval">function modifyText(aEvent) {
  aEvent.target.nodeValue = "pants";
}
</pre>
<p>to get hold of the object. I'm not sure if that's a Gecko bug or some specification in the DOM though.</p>
<p>--<a href="/User:Wjjohnst" title="User:Wjjohnst">DigDug</a> 10:21, 14 Feb 2008 (CST)</p>
<p> </p>
<p>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 <code>removeEventListener</code> or removing all references to an anonymous function". That "or" should probably be "and" instead.</p>
<p>That section should probably be rewritten.</p>
<p>--biesi</p>
<p> </p>
<p>The "Memory issues" section contains an incorrect statement thay says an anynomous event listener cannot be removed:</p>
<blockquote> <p>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.</p>
</blockquote>
<p>The listener can be removed using the <a href="/en/JavaScript/Reference/Functions_and_function_scope/arguments/callee" title="en/JavaScript/Reference/Functions and function scope/arguments/callee"><code>arguments.callee</code></a> property. Try this in your location bar:</p>
<pre>javascript:document.addEventListener("click",function(){if(confirm("Remove?"))document.removeEventListener("click",arguments.callee,false);},false);alert("Click anywhere on the page.");
</pre>
<p>--</p>
<p> </p>
<p>I think the example provided for addEventListener could be much simpler and explicative.<br> My proposal is:</p>
<div style="padding:20px; border:2px solid #BBB"> <h3>Example</h3> <pre>&lt;div id="ear"&gt;Click me&lt;/div&gt;
&lt;div id="display"&gt;&lt;/div&gt;

&lt;script&gt;

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

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

&lt;/script&gt;
</pre> <p><a class=" external" href="http://jsfiddle.net/xfFMk/" title="addEventListener basic example">jsfiddle.net/xfFMk</a></p> <p>The argument of a listener function is an instance of the Event itself (in this case a "Mouse Event"), that contains useful information like <code>event.target</code> (the 'ear').</p> <pre>&lt;script&gt;

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

  function listener(<strong>event</strong>) {
    var text = <strong>event.target.firstChild.nodeValue</strong>;
    document.getElementById('display').innerHTML = text;  // displays "Click me"
  }

&lt;/script&gt;
</pre> <p>If you want to pass parameters to the listener function, you have to use an anonymous function.</p> <pre>&lt;script&gt;

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

  function listener(<strong>text</strong>) {
    document.getElementById('display').innerHTML = text;
  }

&lt;/script&gt;</pre>
</div>
<p><br> -- <a href="/User:michelesalvador">Michele</a>, 6 Jun 2012</p>
Revert to this revision