element.addEventListener

  • Revision slug: Talk:DOM/element.addEventListener
  • Revision title: element.addEventListener
  • Revision id: 232712
  • Created:
  • Creator: wtf
  • Is current revision? No
  • Comment Incorrect statement; 112 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.");

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>
Revert to this revision