element.addEventListener

  • Revision slug: DOM/element.addEventListener
  • Revision title: element.addEventListener
  • Revision id: 40737
  • Created:
  • Creator: DaViD83
  • Is current revision? No
  • Comment /* Perchè usare <code>addEventListener</code>? */

Revision Content

{{ DomRef() }}

Sommario

addEventListener() permette di impostare delle funzioni che verranno chiamate al verificarsi dell'evento specificato, sull'oggetto specificato(target dell'evento).

Sintassi

target.addEventListener(tipo, codiceChiamato, usaCapture);
tipo 
Stringa che rappresenta il tipo di evento su cui mettersi in ascolto.
codiceChiamato 
L'oggetto che riceve una notifica quando avviene l'evento specificato. Deve essere un oggetto che implementa l'interfaccia EventListener ,o anche una semplice funzione Javascript.
usaCapture 
Se impostato a true, usaCapture indica che l'utente vuole iniziare la cattura. Quando la cattura inizia, tutti gli eventi del tipo specificato verranno propagati ai listener registrati prima di essere mandati a qualunque EventTarget sotto di essi nell'albero DOM. Gli eventi sopra di esso nell'albero DOM non innescheranno un EventListener che usa capture. Leggi per una spiegazione dettagliata.

Esempio

 <html>
 <head>
   <title>DOM Event Example</title>
   <style type="text/css">
     #t { border: 1px solid red }
     #t1 { background-color: pink; }
   </style>
   <script type="text/javascript">

   // Function to change the content of t2
   function modifyText() {
     var t2 = document.getElementById("t2");
     t2.firstChild.nodeValue = "three";    
   }
 
   // Function to add event listener to t
   function load() { 
     var el = document.getElementById("t"); 
     el.addEventListener("click", modifyText, false); 
   } 

   </script> 
 </head> 
 <body onload="load();"> 
 <table id="t"> 
   <tr><td id="t1">one</td></tr> 
   <tr><td id="t2">two</td></tr> 
 </table> 
 </body> 
 </html> 

Nell'esempio qui sopra, modifyText() è un listener per l'evento click registrato usando addEventListener(). Un click in un punto qualunque della tabella risalirà fino all'handler e causerà l'esecuzione di modifyText().

Note

Perchè usare addEventListener?

addEventListener è il modo corretto per registrare un listener, come da specifica W3C. I suoi benefici sono:

Aggiungere un listener durante la propagazione dell'evento

Se si aggiunge un EventListener a un EventTarget mentre un evento viene processato, questo non sarà innescato dall'azione corrente, ma verrà aggiunto in una fase successiva del flusso dell'evento, come nella fase di bubbling.

Quando si hanno diversi ascoltatori di evento identici

If multiple identical EventListeners are registered on the same EventTarget with the same parameters the duplicate instances are discarded. They do not cause the EventListener to be called twice and since they are discarded they do not need to be removed with the removeEventListener method.

Il valore di this

Attaching a function using addEventListener() changes the value of this—note that the value of this is passed to a function from the caller.

In the example above, the value of this within modifyText() when called from the onclick event is a reference to the table 't'. If the onclick handler is added in the HTML source:

<table id="t" onclick="modifyText();">
  ...
</table>

then value of this within modifyText() when called from the onclick event will be a reference to the global (window) object.

Passaggio automatico dell'oggetto event

In the Gecko DOM, when events are attached dynamically a reference to the event object that caused the event is automatically passed as the first parameter - see the Gecko DOM event page.

Altri DOM(compatibilità con Internet Explorer)

Some DOMs support attachEvent rather than addEventListener. To support them, the example above can be modified to:

if (el.addEventListener){
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent){
  el.attachEvent('onclick', modifyText);
}

Maniera tradizionale per impostare eventi

addEventListener was introduced with the DOM 2 Events specification. Before then, events were attached as follows:

// Using a function reference—note lack of '()'
el.onclick = modifyText;

// Using a function statement
element.onclick = function(){
                    ...statements...
                  };

This method replaces the existing onclick event handler(s) on the element if there are any. Similarly for other 'on' events such as onblur, onkeypress, and so on.

Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to attach events dynamically unless the extra features of addEventListener are needed.

Specifiche

addEventListener

{{ languages( { "fr": "fr/DOM/element.addEventListener", "en": "en/DOM/element.addEventListener" } ) }}

Revision Source

<p>
{{ DomRef() }}
</p>
<h3 name="Sommario">Sommario</h3>
<p><code>addEventListener()</code> permette di impostare delle funzioni che verranno chiamate al verificarsi dell'evento specificato, sull'oggetto specificato(target dell'evento).
</p>
<h3 name="Sintassi">Sintassi</h3>
<pre class="eval"><i>target</i>.addEventListener(<i>tipo</i>, <i>codiceChiamato</i>, <i>usaCapture</i>);
</pre>
<dl><dt> tipo </dt><dd> Stringa che rappresenta il tipo di evento su cui mettersi in ascolto.
</dd><dt> codiceChiamato </dt><dd> L'oggetto che riceve una notifica quando avviene l'evento specificato. Deve essere un oggetto che implementa l'interfaccia <a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventListener"><code>EventListener</code></a> ,o anche una semplice funzione Javascript.
</dd><dt> usaCapture </dt><dd> Se impostato a true, <code>usaCapture</code> indica che l'utente vuole iniziare la cattura. Quando la cattura inizia, tutti gli eventi del tipo specificato verranno propagati ai listener registrati prima di essere mandati a qualunque EventTarget sotto di essi nell'albero DOM. Gli eventi sopra di esso nell'albero DOM non innescheranno un EventListener che usa capture. Leggi <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow"> per una spiegazione dettagliata.
</a></dd></dl><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow">
<h3 name="Esempio">Esempio</h3>
<pre> &lt;html&gt;
 &lt;head&gt;
   &lt;title&gt;DOM Event Example&lt;/title&gt;
   &lt;style type="text/css"&gt;
     #t { border: 1px solid red }
     #t1 { background-color: pink; }
   &lt;/style&gt;
   &lt;script type="text/javascript"&gt;

   // Function to change the content of t2
   function modifyText() {
     var t2 = document.getElementById("t2");
     t2.firstChild.nodeValue = "three";    
   }
 
   // Function to add event listener to t
   function load() { 
     var el = document.getElementById("t"); 
     el.addEventListener("click", modifyText, false); 
   } 

   &lt;/script&gt; 
 &lt;/head&gt; 
 &lt;body onload="load();"&gt; 
 &lt;table id="t"&gt; 
   &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt; 
   &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt; 
 &lt;/table&gt; 
 &lt;/body&gt; 
 &lt;/html&gt; 
</pre>
<p>Nell'esempio qui sopra, <code>modifyText()</code> è un listener per l'evento <code>click</code> registrato usando <code>addEventListener()</code>. Un click in un punto qualunque della tabella risalirà fino all'handler e causerà l'esecuzione di <code>modifyText()</code>.
</p>
<h3 name="Note">Note</h3>
<h4 name="Perch.C3.A8_usare_addEventListener.3F">Perchè usare <code>addEventListener</code>?</h4>
<p><code>addEventListener</code> è il modo corretto per registrare un listener, come da specifica W3C. I suoi benefici sono:
</p>
</a><ul><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow"></a><li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow"> permette di aggiungere diversi handler per singolo evento. Ciò è particolarmente utile per le librerie </a><a href="it/DHTML">DHTML</a> e per le <a href="it/Extensions">estensioni di Mozilla</a>, che devono convivere tra loro senza andare in conflitto.
</li><li> Dà un controllo migliore di cosa succede quando il listener viene attivato(capturing vs bubbling)
</li><li> funziona con qualunque elemento DOM, non solo con gli elementi HTML.
</li></ul>
<h4 name="Aggiungere_un_listener_durante_la_propagazione_dell.27evento">Aggiungere un listener durante la propagazione dell'evento</h4>
<p>Se si aggiunge un EventListener a un EventTarget mentre un evento viene processato, questo non sarà innescato dall'azione corrente, ma verrà aggiunto in una fase successiva del flusso dell'evento, come nella fase di bubbling.
</p>
<h4 name="Quando_si_hanno_diversi_ascoltatori_di_evento_identici">Quando si hanno diversi ascoltatori di evento identici</h4>
<p>If multiple identical EventListeners are registered on the same EventTarget with the same parameters the duplicate instances are discarded. They do not cause the EventListener to be called twice and since they are discarded they do not need to be removed with the <a href="it/DOM/element.removeEventListener">removeEventListener</a> method.
</p>
<h4 name="Il_valore_di_this">Il valore di <code>this</code></h4>
<p>Attaching a function using <code>addEventListener()</code> changes the value of <code>this</code>—note that the value of <code>this</code> is passed to a function from the caller.
</p><p>In the example above, the value of <code>this</code> within <code>modifyText()</code> when called from the onclick event is a reference to the table 't'. If the onclick handler is added in the HTML source:
</p>
<pre>&lt;table id="t" onclick="modifyText();"&gt;
  ...
&lt;/table&gt;
</pre>
<p>then value of <code>this</code> within <code>modifyText()</code> when called from the onclick event will be a reference to the global (window) object.
</p>
<h4 name="Passaggio_automatico_dell.27oggetto_event">Passaggio automatico dell'oggetto <code>event</code></h4>
<p>In the Gecko DOM, when events are attached dynamically a reference to the event object that caused the event is automatically passed as the first parameter - see the <a href="it/DOM/event">Gecko DOM event</a> page.
</p>
<h4 name="Altri_DOM.28compatibilit.C3.A0_con_Internet_Explorer.29">Altri DOM(compatibilità con Internet Explorer)</h4>
<p>Some DOMs support <code>attachEvent</code> rather than <code>addEventListener</code>. To support them, the example above can be modified to:
</p>
<pre>if (el.addEventListener){
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent){
  el.attachEvent('onclick', modifyText);
}
</pre>
<h4 name="Maniera_tradizionale_per_impostare_eventi">Maniera tradizionale per impostare eventi</h4>
<p><code>addEventListener</code> was introduced with the DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a> specification. Before then, events were attached as follows:
</p>
<pre>// Using a function reference—note lack of '()'
el.onclick = modifyText;

// Using a function statement
element.onclick = function(){
                    ...statements...
                  };
</pre>
<p>This method replaces the existing <code>onclick</code> event handler(s) on the element if there are any. Similarly for other 'on' events such as <code>onblur</code>, <code>onkeypress</code>, and so on.
</p><p>Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to attach events dynamically unless the extra features of <code>addEventListener</code> are needed.
</p>
<h3 name="Specifiche">Specifiche</h3>
<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-addEventListener">addEventListener</a>
</p>{{ languages( { "fr": "fr/DOM/element.addEventListener", "en": "en/DOM/element.addEventListener" } ) }}
Revert to this revision