mozilla

Compare Revisions

element.addEventListener

Change Revisions

Revision 232712:

Revision 232712 by wtf on

Revision 232713:

Revision 232713 by michelesalvador on

Title:
element.addEventListener
element.addEventListener
Slug:
Talk:DOM/element.addEventListener
Talk:DOM/element.addEventListener
Tags:
NeedsHelp, needsattention, "MDC Project"
NeedsHelp, needsattention, "MDC Project"
Content:

Revision 232712
Revision 232713
tt68    <p>
69      --
70    </p>
71    <p>
72      &nbsp;
73    </p>
74    <p>
75      I think the example provided for addEventListener could be 
 >much simpler and explicative.<br>
76      My proposal is:
77    </p>
78    <div style="padding:20px; border:2px solid #BBB">
79      <h3>
80        Example
81      </h3>
82      <pre>
83&lt;div id="ear"&gt;Click me&lt;/div&gt;
84&lt;div id="display"&gt;&lt;/div&gt;
85 
86&lt;script&gt;
87 
88  var ear = document.getElementById('ear');
89  ear.addEventListener("click", listener, false);
90 
91  function listener() {
92    document.getElementById('display').innerHTML = "blah blah";
93  }
94 
95&lt;/script&gt;
96</pre>
97      <p>
98        <a class=" external" href="http://jsfiddle.net/xfFMk/" ti
 >tle="addEventListener basic example">jsfiddle.net/xfFMk</a>
99      </p>
100      <p>
101        The argument of a listener function is an instance of the
 > Event itself (in this case a "Mouse Event"), that contains usefu
 >l information like <code>event.target</code> (the 'ear').
102      </p>
103      <pre>
104&lt;script&gt;
105 
106  var ear = document.getElementById('ear');
107  ear.addEventListener("click", listener, false);
108 
109  function listener(<strong>event</strong>) {
110    var text = <strong>event.target.firstChild.nodeValue</strong>
 >;
111    document.getElementById('display').innerHTML = text;  // disp
 >lays "Click me"
112  }
113 
114&lt;/script&gt;
115</pre>
116      <p>
117        If you want to pass parameters to the listener function, 
 >you have to use an anonymous function.
118      </p>
119      <pre>
120&lt;script&gt;
121 
122  var ear = document.getElementById('ear');
123  ear.addEventListener("click", <strong>function(){listener("blah
 >")}</strong>, false);
124 
125  function listener(<strong>text</strong>) {
126    document.getElementById('display').innerHTML = text;
127  }
128 
129&lt;/script&gt;
130</pre>
131    </div>
132    <p>
133      <br>
134      -- <a href="/User:michelesalvador">Michele</a>, 6 Jun 2012
135    </p>

Back to History