unslug it: move

1 files changed, 694 insertions, 0 deletions

diff --git a/files/it/web/api/eventtarget/addeventlistener/index.html b/files/it/web/api/eventtarget/addeventlistener/index.html
new file mode 100644
index 0000000000..6608e69bd3
--- /dev/null
+++ b/files/it/web/api/eventtarget/addeventlistener/index.html
@@ -0,0 +1,694 @@
+---
+title: EventTarget.addEventListener()
+slug: Web/API/Element/addEventListener
+tags:
+  - API
+  - DOM
+  - EventTarget
+  - Gestori di Eventi
+  - JavaScript
+  - Referenza
+  - Ricevere Eventi
+  - Rilevare Eventi
+  - addEventListener
+  - attachEvent
+  - eventi
+  - metodo
+  - mselementresize
+translation_of: Web/API/EventTarget/addEventListener
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><span class="seoSummary">Il metodo {{domxref("EventTarget")}} <code><strong>addEventListener()</strong></code> imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato all'elemento di destinazione.</span> I target comuni sono {{domxref("Element")}}, {{domxref("Document")}}, e {{domxref("Window")}}, ma la destinazione può essere qualsiasi oggetto che supporti eventi (come <code><a href="/it/docs/DOM/XMLHttpRequest">XMLHttpRequest</a></code>).</p>
+
+<p><code>addEventListener()</code> funziona aggiungendo una funzione o un oggetto che implementa {{domxref("EventListener")}} all'elenco di listener di eventi per il tipo di evento specificato sul {{domxref("EventTarget")}} sul quale è chiamato.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>options</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>useCapture</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>useCapture</em>, <em>wantsUntrusted </em>{{Non-standard_inline}}]); // Gecko/Mozilla only</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Una stringa sensibile al maiuscolo/minuscolo che rappresenta il <a href="/it/docs/Web/Events">tipo di evento</a> da assegnare.</dd>
+ <dt><code>listener</code></dt>
+ <dd>L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia {{domxref("Event")}}) quando si verifica un evento del tipo specificato. Questo deve essere un oggetto che implementa l'interfaccia {{domxref("EventListener")}}, o una <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Guida/Functions">funzione</a>. Vedi {{anch("Il callback del listener di eventi")}} per i dettagli sul callback stesso.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un oggetto opzioni che specifica le caratteristiche del listener di eventi. Le opzioni disponibili sono:
+ <ul>
+  <li><code>capture</code>: Un {{jsxref("Boolean")}} che indica che eventi di questo tipo verranno inviati al <code>listener</code> registrato prima di essere inviati a qualsiasi <code>EventTarget</code> sotto di esso nell'albero del DOM.</li>
+  <li><code>once</code>: Un {{jsxref("Boolean")}} che indica che il <code>listener</code> dovrebbe essere invocato al massimo una volta dopo essere stato aggiunto. Se ritorna <code>true</code>, il <code>listener</code> verrebbe automaticamente rimosso quando invocato.</li>
+  <li><code>passive</code>: Un {{jsxref("Boolean")}} che, se <code>true</code>, indica che la funzione specificata da <code>listener</code> non chiamerà mai {{domxref("Event.preventDefault", "preventDefault()")}}. Se un listener passivo chiama <code>preventDefault()</code>, l'user agent non farà altro che generare un avviso nella console. Vedi {{anch("Miglioramento delle prestazioni di scorrimento con i listeners passivi")}} per saperne di più.</li>
+  <li>{{non-standard_inline}} <code>mozSystemGroup</code>: Un {{jsxref("Boolean")}} che indica che l'ascoltatore deve essere aggiunto al gruppo di sistema. Disponibile solo nel codice in esecuzione in XBL o nel {{glossary("chrome")}} del browser Firefox.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} che indica se eventi di questo tipo verranno inviati al <code>listener</code> registrato <em>prima</em> di essere inviati a qualsiasi <code>EventTarget</code> sotto di esso nell'albero del DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non innescheranno un ascoltatore designato ad usare il capturing. Il bubbling e la cattura degli eventi sono due modi di propagare gli eventi che si verificano in un elemento che è annidato in un altro elemento, quando entrambi gli elementi hanno registrato un handle per quell'evento. La modalità di propagazione dell'evento determina l'ordine in cui gli elementi ricevono l'evento. Vedi <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> e <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> per una spiegazione dettagliata. Se non specificato, <code>useCapture</code> di default è <code>false</code>.</dd>
+ <dd>
+ <div class="note"><strong>Note:</strong> Per gli ascoltatori di eventi collegati al target dell'evento, l'evento si trova nella fase target, piuttosto che nelle fasi di cattura e bubbling. Gli eventi nella fase di destinazione attiveranno tutti gli ascoltatori di un elemento nell'ordine in cui sono stati registrati, indipendentemente dal parametro <code>useCapture</code>.</div>
+
+ <div class="note"><strong>Note:</strong> <code>useCapture</code> non è sempre stato opzionale. Idealmente, dovresti includerlo per la massima compatibilità con i browser.</div>
+ </dd>
+ <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt>
+ <dd>Un parametro specifico per Firefox (Gecko). Se è <code>true</code>, il listener riceve eventi sintetici inviati dal contenuto web (il valore predefinito è <code>false</code> per il browser {{glossary("chrome")}} e <code>true</code> per le normali pagine Web). Questo parametro è utile per il codice trovato nei componenti aggiuntivi e anche per il browser stesso.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<h3 id="Il_callback_del_listener_di_eventi">Il callback del listener di eventi</h3>
+
+<p>Il listener di eventi può essere specificato come funzione di callback o come oggetto che implementa {{domxref("EventListener")}}, il cui metodo {{domxref("EventListener.handleEvent", "handleEvent()")}} funge da funzione di callback.</p>
+
+<p>La stessa funzione di callback ha gli stessi parametri e il valore di ritorno del metodo <code>handleEvent()</code> cioè, il callback accetta un singolo parametro: un oggetto basato su {{domxref("Event")}} che descrive l'evento che si è verificato e non restituisce nulla.</p>
+
+<p>Ad esempio, un callback del gestore di eventi che può essere utilizzato per gestire entrambi gli eventi {{event("fullscreenchange")}} e {{event("fullscreenerror")}} potrebbe avere il seguente aspetto:</p>
+
+<pre class="brush: js">function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* gestire un interruttore a schermo intero */
+  } else /* fullscreenerror */ {
+    /* gestire un errore di commutazione a schermo intero */
+  }
+}</pre>
+
+<h3 id="Rilevamento_sicuro_del_supporto_opzionale">Rilevamento sicuro del supporto opzionale</h3>
+
+<p>Nelle versioni precedenti della specifica DOM, il terzo parametro di <code>addEventListener()</code> era un valore booleano che indicava se utilizzare o meno l'acquisizione. Nel corso del tempo, è diventato chiaro che erano necessarie più opzioni. Piuttosto che aggiungere altri parametri alla funzione (complicando enormemente le cose quando si tratta di valori opzionali), il terzo parametro è stato modificato in un oggetto che può contenere varie proprietà che definiscono i valori delle opzioni per configurare il processo di rimozione del listener di eventi.</p>
+
+<p>Poiché i browser più vecchi (così come alcuni browser non troppo vecchi) presuppongono ancora che il terzo parametro sia un booleano, è necessario creare il codice per gestire questo scenario in modo intelligente. Puoi farlo utilizzando il rilevamento delle funzioni per ciascuna delle opzioni che ti interessano.</p>
+
+<p>Ad esempio, se si desidera verificare l'opzione <code>passive</code>:</p>
+
+<pre class="brush: js">var passiveSupported = false;
+
+try {
+  var options = {
+    get passive() { // Questa funzione verrà chiamata quando il browser
+                    //     tenta di accedere alla proprietà passiva.
+      passiveSupported = true;
+    }
+  };
+
+  window.addEventListener("test", options, options);
+  window.removeEventListener("test", options, options);
+} catch(err) {
+  passiveSupported = false;
+}
+</pre>
+
+<p>Questo crea un oggetto <code>options</code> con una funzione getter per la proprietà <code>passive</code>; il getter imposta una flag, <code>passiveSupported</code>, è <code>true</code> se viene chiamato. Ciò significa che se il browser controlla il valore della proprietà <code>passive</code> sull'oggetto <code>options</code>, <code>passiveSupported</code> sarà impostato su <code>true</code>; altrimenti rimarrà <code>false</code>. Chiamiamo quindi <code>addEventListener()</code> per impostare un gestore di eventi falsi, specificando tali opzioni, in modo che le opzioni vengano controllate se il browser riconosce un oggetto come terzo parametro. Quindi, chiamiamo <code>removeEventListener()</code> per pulire dopo noi stessi. (Nota che <code>handleEvent()</code> viene ignorato sui listener di eventi che non vengono chiamati.)</p>
+
+<p>Puoi verificare se un'opzione è supportata in questo modo. Basta aggiungere un getter per quella opzione usando il codice simile a quello mostrato sopra.</p>
+
+<p>Quindi, quando vuoi creare un listener di eventi effettivo che utilizza le opzioni in questione, puoi fare qualcosa di simile a questo:</p>
+
+<pre class="brush: js">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);</pre>
+
+<p>Qui stiamo aggiungendo un listener per l'evento {{event("mouseup")}} sull'elemento <code>someElement</code>. Per il terzo parametro, se <code>passiveSupported</code> è <code>true</code>, stiamo specificando un oggetto <code>options</code> con <code>passive</code> impostato su <code>true</code>; altrimenti, sappiamo che dobbiamo passare un booleano e passiamo <code>false</code> come valore del parametro <code>useCapture</code>.</p>
+
+<p>Se preferisci, puoi usare una libreria di terze parti come <a href="https://modernizr.com/docs">Modernizr</a> o <a href="https://github.com/rafrex/detect-it">Detect It</a> per fare questo test per te.</p>
+
+<p>È possibile ottenere ulteriori informazioni dall'articolo su <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code> dal gruppo di <a href="https://wicg.github.io/admin/charter.html">Web Incubator Community</a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Aggiungere_un_semplice_listener">Aggiungere un semplice listener</h3>
+
+<p>Questo esempio dimostra come utilizzare <code>addEventListener()</code> per controllare i click del mouse su un elemento.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&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;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">// Funzione per modificare il contenuto di t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "three") {
+    t2.firstChild.nodeValue = "two";
+  } else {
+    t2.firstChild.nodeValue = "three";
+  }
+}
+
+// Aggiungere listener di eventi alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+</pre>
+
+<p>In questo codice, <code>modifyText()</code> è un listener per gli eventi <code>click</code> registrati usando <code>addEventListener()</code>. Un click in qualsiasi punto della tabella esegue il gestore ed esegue <code>modifyText()</code>.</p>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>{{EmbedLiveSample('Aggiungere_un_semplice_listener')}}</p>
+
+<h3 id="Listener_di_eventi_con_funzione_anonima">Listener di eventi con funzione anonima</h3>
+
+<p>Qui, daremo un'occhiata a come utilizzare una funzione anonima per passare parametri nel listener di eventi.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&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;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Funzione per aggiungere listener alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("four")}, false);
+</pre>
+
+<p>Nota che il listener è una funzione anonima che incapsula codice che è quindi, a sua volta, in grado di inviare parametri alla funzione <code>modifyText()</code>, che è responsabile per rispondere effettivamente all'evento.</p>
+
+<h4 id="Risultato_2">Risultato</h4>
+
+<p>{{EmbedLiveSample('Listener_di_eventi_con_funzione_anonima')}}</p>
+
+<h3 id="Listener_di_eventi_con_una_funzione_a_freccia">Listener di eventi con una funzione a freccia</h3>
+
+<p>Questo esempio dimostra un semplice listener di eventi implementato utilizzando la notazione della funzione a freccia.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&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;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Aggiungere un listener alla tabella con una funzione a freccia
+var el = document.getElementById("outside");
+el.addEventListener("click", () =&gt; { modifyText("four"); }, false);
+</pre>
+
+<h4 id="Risultato_3">Risultato</h4>
+
+<p>{{EmbedLiveSample('Listener_di_eventi_con_una_funzione_a_freccia')}}</p>
+
+<p>Si noti che, mentre le funzioni anonime e le frecce sono simili, hanno diversi collegamenti <code>this</code>. Mentre le funzioni anonime (e tutte le funzioni JavaScript tradizionali) creano i propri collegamenti <code>this</code>, le funzioni a freccia ereditano il vincolo <code>this</code> della funzione di contenimento.</p>
+
+<p>Ciò significa che le variabili e le costanti disponibili per la funzione di contenimento sono disponibili anche per il gestore di eventi quando si utilizza una funzione di freccia.</p>
+
+<h3 id="Esempio_di_utilizzo_delle_opzioni">Esempio di utilizzo delle opzioni</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+    outer, once &amp; none-once
+    &lt;div class="middle" target="_blank"&gt;
+        middle, capture &amp; none-capture
+        &lt;a class="inner1" href="https://www.mozilla.org" target="_blank"&gt;
+            inner1, passive &amp; preventDefault(which is not allowed)
+        &lt;/a&gt;
+        &lt;a class="inner2" href="https://developer.mozilla.org/" target="_blank"&gt;
+            inner2, none-passive &amp; preventDefault(not open new page)
+        &lt;/a&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">    .outer, .middle, .inner1, .inner2 {
+        display:block;
+        width:520px;
+        padding:15px;
+        margin:15px;
+        text-decoration:none;
+    }
+    .outer{
+        border:1px solid red;
+        color:red;
+    }
+    .middle{
+        border:1px solid green;
+        color:green;
+        width:460px;
+    }
+    .inner1, .inner2{
+        border:1px solid purple;
+        color:purple;
+        width:400px;
+    }
+</pre>
+
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<pre class="brush: js">    let outer  = document.getElementsByClassName('outer') [0];
+    let middle = document.getElementsByClassName('middle')[0];
+    let inner1 = document.getElementsByClassName('inner1')[0];
+    let inner2 = document.getElementsByClassName('inner2')[0];
+
+    let capture = {
+        capture : true
+    };
+    let noneCapture = {
+        capture : false
+    };
+    let once = {
+        once : true
+    };
+    let noneOnce = {
+        once : false
+    };
+    let passive = {
+        passive : true
+    };
+    let nonePassive = {
+        passive : false
+    };
+
+
+    outer.addEventListener('click', onceHandler, once);
+    outer.addEventListener('click', noneOnceHandler, noneOnce);
+    middle.addEventListener('click', captureHandler, capture);
+    middle.addEventListener('click', noneCaptureHandler, noneCapture);
+    inner1.addEventListener('click', passiveHandler, passive);
+    inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+    function onceHandler(event) {
+        alert('outer, once');
+    }
+    function noneOnceHandler(event) {
+        alert('outer, none-once, default');
+    }
+    function captureHandler(event) {
+        //event.stopImmediatePropagation();
+        alert('middle, capture');
+    }
+    function noneCaptureHandler(event) {
+        alert('middle, none-capture, default');
+    }
+    function passiveHandler(event) {
+        // Unable to preventDefault inside passive event listener invocation.
+        event.preventDefault();
+        alert('inner1, passive, open new page');
+    }
+    function nonePassiveHandler(event) {
+        event.preventDefault();
+        //event.stopPropagation();
+        alert('inner2, none-passive, default, not open new page');
+    }
+</pre>
+
+<h4 id="Risultato_4">Risultato</h4>
+
+<p>Fai click rispettivamente sui contenitori esterni, centrali e interni per vedere come funzionano le opzioni.</p>
+
+<p>{{ EmbedLiveSample('Esempio_di_utilizzo_delle_opzioni', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p>
+
+<p>Prima di utilizzare un particolare valore nell'oggetto <code>options</code> è una buona idea assicurarsi che il browser dell'utente lo supporti, poiché si tratta di un'aggiunta che non tutti i browser hanno supportato storicamente. Vedi {{anch("Rilevamento sicuro del supporto opzionale")}} per i dettagli.</p>
+
+<h2 id="Altre_note">Altre note</h2>
+
+<h3 id="Perchè_usare_addEventListener">Perchè usare <code>addEventListener</code>?</h3>
+
+<p><code>addEventListener()</code> è il modo per registrare un listener di eventi come specificato nel DOM W3C. I benefici sono i seguenti:</p>
+
+<ul>
+ <li>Permette di aggiungere più di un singolo gestore per un evento. Ciò è particolarmente utile per le librerie {{Glossary("AJAX")}} i moduli JavaScript o qualsiasi altro tipo di codice che deve funzionare bene con altre librerie / estensioni.</li>
+ <li>Ti dà il controllo più fine della fase quando l'ascoltatore è attivato (capturing vs. bubbling).</li>
+ <li>Funziona su qualsiasi elemento del DOM, non solo sugli elementi HTML.</li>
+</ul>
+
+<p>Il modo alternativo, <a href="#Il_modo_più_antico_per_registrare_i_listeners">più vecchio per registrare i listener</a>, è descritto di seguito.</p>
+
+<h3 id="Aggiunta_di_un_listener_durante_la_spedizione_dell'evento">Aggiunta di un listener durante la spedizione dell'evento</h3>
+
+<p>Se un {{domxref("EventListener")}} viene aggiunto ad un {{domxref("EventTarget")}} mentre sta elaborando un evento, quell'evento non attiva il listener. Tuttavia, lo stesso listener può essere attivato durante una fase successiva del flusso di eventi, come la fase di bubbling.</p>
+
+<h3 id="Più_listeners_identici">Più listeners identici</h3>
+
+<p>Se più <code>EventListener</code> indentici sono registrati sullo stesso <code>EventTarget</code> con gli stessi parametri, le istanze duplicate vengono scartate. Non causano l'<code>EventListener</code> da chiamare due volte e non devono essere rimossi manualmente con il metodo {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}. Nota tuttavia che quando si utilizza una funzione anonima come gestore, tali listener NON saranno identici poiché le funzioni anonime non sono identiche anche se definite utilizzando il codice sorgente invariato SAME chiamato semplicemente ripetutamente, anche se in un ciclo. Tuttavia, definire ripetutamente la stessa funzione denominata in questi casi può essere più problematico. (vedi <a href="#Problemi_di_memoria">Problemi di memoria</a> di seguito.)</p>
+
+<h3 id="Il_valore_di_this_all'interno_del_gestore">Il valore di <code>this</code> all'interno del gestore</h3>
+
+<p>È spesso preferibile fare riferimento all'elemento su cui è stato attivato il gestore eventi, ad esempio quando si utilizza un gestore generico per un insieme di elementi simili.</p>
+
+<p>Se si collega un handler ad un elemento utilizzando <code>addEventListener()</code>, il valore di <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/this">this</a></code> all'interno del gestore è un riferimento all'elemento. È uguale al valore della proprietà <code>currentTarget</code> dell'argomento evento che viene passato al gestore.</p>
+
+<pre class="brush: js">my_element.addEventListener('click', function (e) {
+  console.log(this.className)           // registra il className di my_element
+  console.log(e.currentTarget === this) // ritorna `true`
+})
+</pre>
+
+<p>Come promemoria, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">le funzioni freccia non hanno il loro <code>this</code> contesto</a>.</p>
+
+<pre class="brush: js">my_element.addEventListener('click', (e) =&gt; {
+  console.log(this.className)           // WARNING: `this` is not `my_element`
+  console.log(e.currentTarget === this) // logs `false`
+})</pre>
+
+<p>Se un gestore di eventi (ad esempio, {{domxref("Element.onclick", "onclick")}}) è specificato su un elemento nel codice sorgente HTML, il codice JavaScript nel valore dell'attributo viene effettivamente racchiuso in una funzione di gestore che associa il valore di <code>this</code> in modo coerente con <code>addEventListener()</code>; un'occorrenza di <code>this</code> all'interno del codice rappresenta un riferimento all'elemento.</p>
+
+<pre class="brush: html">&lt;table id="my_table" onclick="console.log(this.id);"&gt;&lt;!-- `this` refers to the table; logs 'my_table' --&gt;
+  ...
+&lt;/table&gt;
+</pre>
+
+<p>Si noti che il valore di <code>this</code> all'interno di una funzione, chiamato dal codice nel valore dell'attributo, si comporta come per <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/this">regole standard</a>. Questo è mostrato nel seguente esempio:</p>
+
+<pre class="brush: html">&lt;script&gt;
+  function logID() { console.log(this.id); }
+&lt;/script&gt;
+&lt;table id="my_table" onclick="logID();"&gt;&lt;!-- when called, `this` will refer to the global object --&gt;
+  ...
+&lt;/table&gt;
+</pre>
+
+<p>Il valore di <code>this</code> all'interno di <code>logID()</code> è un riferimento all'oggetto globale {{domxref("Window")}} (o <code>undefined</code> nel caso della <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>).</p>
+
+<h4 id="Specificare_this_usando_bind()">Specificare <code>this</code> usando <code>bind()</code></h4>
+
+<p>Il metodo <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> consente di specificare il valore che dovrebbe essere usato come <code>this</code> per tutte le chiamate a una determinata funzione. Ciò ti consente di bypassare facilmente i problemi in cui non è chiaro quale sarà <code>this</code> a seconda del contesto in cui è stata chiamata la tua funzione. Nota, tuttavia, che è necessario mantenere un riferimento per l'ascoltatore in modo da poterlo rimuovere in seguito.</p>
+
+<p>Questo è un esempio con e senza <code>bind()</code>:</p>
+
+<pre class="brush: js">var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as |this| is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+var s = new Something(document.body);
+</pre>
+
+<p>Un'altra soluzione sta utilizzando una funzione speciale chiamata <code>handleEvent()</code> per catturare qualsiasi evento:</p>
+
+<pre class="brush: js">var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is bound to newly created object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are |this|, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listeners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+var s = new Something(document.body);
+</pre>
+
+<p>Un altro modo di gestire il riferimento a <em>this </em>è passare ad <code>EventListener</code> una funzione che chiama il metodo dell'oggetto che contiene i campi a cui è necessario accedere:</p>
+
+<pre class="brush: js">class SomeClass {
+
+  constructor() {
+    this.name = 'Something Good';
+  }
+
+  register() {
+    var that = this;
+    window.addEventListener('keydown', function(e) {return that.someMethod(e);});
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // some code here...
+        break;
+      case 6:
+        // some code here...
+        break;
+    }
+  }
+
+}
+
+var myObject = new SomeClass();
+myObject.register();</pre>
+
+<h3 id="Legacy_Internet_Explorer_e_attachEvent">Legacy Internet Explorer e attachEvent</h3>
+
+<p>Nelle versioni di Internet Explorer precedenti a IE 9, devi usare {{domxref("EventTarget.attachEvent", "attachEvent()")}}, piuttosto che lo standard <code>addEventListener()</code>. Per IE, modifichiamo l'esempio precedente per:</p>
+
+<pre class="brush: js">if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+</pre>
+
+<p>C'è un inconveniente di <code>attachEvent()</code>: il valore di <code>this</code> sarà un riferimento all'oggetto <code>window</code>, invece dell'elemento su cui è stato chiamato.</p>
+
+<p>Il metodo <code>attachEvent()</code> potrebbe essere associato all'evento <code>onresize</code> per rilevare quando alcuni elementi di una pagina Web sono stati ridimensionati. L'evento proprietario <code>mselementresize</code> quando abbinato al metodo <code>addEventListener</code> di registrazione dei gestori di eventi, fornisce funzionalità simili a <code>onresize</code>, attivando quando alcuni elementi HTML vengono ridimensionati.</p>
+
+<h3 id="Compatibilità">Compatibilità</h3>
+
+<p>Puoi lavorare attorno a <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}}, e {{domxref("Event.stopPropagation()")}} non supportati da Internet Explorer 8 di usando il seguente codice all'inizio del tuo script. Il codice supporta l'uso di <code>handleEvent()</code> e anche l'evento {{event("DOMContentLoaded")}}.</p>
+
+<div class="note">
+<p><strong>Note: </strong><code>useCapture</code> non è supportato, in quanto IE 8 non ha alcun metodo alternativo. Il seguente codice aggiunge solo il supporto per IE 8. Questo polyfill di IE 8 funziona solo in modalità standard: è richiesta una dichiarazione doctype.</p>
+</div>
+
+<pre class="brush: js">(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter&lt;eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();</pre>
+
+<h3 id="Il_modo_più_antico_per_registrare_i_listeners">Il modo più antico per registrare i listeners</h3>
+
+<p><code>addEventListener()</code> è stato introdotto con la specifica DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Prima di allora, gli ascoltatori di eventi sono stati registrati come segue</a>:</p>
+
+<pre class="brush: js">// Passando un riferimento alla funzione - non aggiungere "()" dopo di esso, che chiamerebbe la funzione!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+  // ... function logic ...
+};
+</pre>
+
+<p>Questo metodo sostituisce il listener dell'evento <code>click</code> esistente sull'elemento se ce n'è uno. Altri eventi e gestori di eventi associati come <code>blur</code> (<code>onblur</code>) e <code>keypress</code> (<code>onkeypress</code>) si comportano in modo simile.</p>
+
+<p>Poiché era essenzialmente parte di {{glossary("DOM", "DOM 0")}}, questa tecnica per aggiungere listener di eventi è ampiamente supportata e non richiede uno speciale codice cross-browser. Viene normalmente utilizzato per registrare dinamicamente i listener di eventi a meno che non siano necessarie le funzionalità extra di <code>addEventListener()</code>.</p>
+
+<h3 id="Problemi_di_memoria">Problemi di memoria</h3>
+
+<pre class="brush: js">var els = document.getElementsByTagName('*');
+
+
+// Case 1
+for(var i = 0; i &lt; els.length; i++) {
+  els[i].addEventListener("click", function(e){/* do something */}, false);
+}
+
+
+// Case 2
+function processEvent(e) {
+  /* do something */
+}
+
+for(var i = 0; i &lt; els.length; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+</pre>
+
+<p>Nel primo caso sopra, viene creata una nuova funzione (anonima) di gestione con ogni iterazione del ciclo. Nel secondo caso, la stessa funzione dichiarata in precedenza viene utilizzata come gestore di eventi, il che si traduce in un minore consumo di memoria poiché è stata creata una sola funzione di gestore. Inoltre, nel primo caso, non è possibile chiamare {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} perché non viene mantenuto alcun riferimento alla funzione anonima (o qui, non mantenuto a nessuna delle più funzioni anonime che il loop potrebbe creare.) Nel secondo caso, è possibile eseguire <code>myElement.removeEventListener("click", processEvent, false)</code> perchè <code>processEvent</code> è il riferimento alla funzione.</p>
+
+<p>In realtà, per quanto riguarda il consumo di memoria, la mancanza di mantenere un riferimento alla funzione non è il vero problema; piuttosto è la mancanza di mantenere un riferimento di funzione STATICO. In entrambi i casi di problemi di seguito, viene mantenuto un riferimento alla funzione, ma poiché viene ridefinito a ogni iterazione, non è statico. Nel terzo caso, il riferimento alla funzione anonima viene riassegnato ad ogni iterazione. Nel quarto caso, l'intera definizione di funzione è invariata, ma viene ancora ripetutamente definita come se fosse nuova (a meno che non fosse [[promoted]] dal compilatore) e quindi non sia statica. Pertanto, sebbene sembrino essere semplicemente [[Multiple identifier event listers]], in entrambi i casi ogni iterazione creerà invece un nuovo listener con il proprio riferimento univoco alla funzione del gestore. Tuttavia, poiché la definizione della funzione stessa non cambia, la STESSA funzione può ancora essere chiamata per ogni listener duplicato (specialmente se il codice viene ottimizzato).</p>
+
+<p>Anche in entrambi i casi, poiché il riferimento alla funzione è stato mantenuto ma ripetutamente ridefinito con ogni aggiunta, l'istruzione remove di sopra può ancora rimuovere un listener, ma ora solo l'ultimo aggiunto.</p>
+
+<pre class="brush: js">// Solo a scopo illustrativo: nota che "MISTAKE" di [j] per [i] causando così l'associazione di tutti gli eventi desiderati allo STESSO elemento
+
+// Case 3
+for (var i = 0, j = 0 ; i &lt; els.length ; i++) {
+  /* do lots of stuff with */
+  els[j].addEventListener("click", processEvent = function(e){/* do something */}, false);
+}
+
+// Case 4
+for (var i = 0, j = 0 ; i &lt; els.length ; i++) {
+  /* do lots of stuff with j */
+  function processEvent(e){/* do something */};
+  els[j].addEventListener("click", processEvent, false);
+}</pre>
+
+<h3 id="Miglioramento_delle_prestazioni_di_scorrimento_con_i_listeners_passivi">Miglioramento delle prestazioni di scorrimento con i listeners passivi</h3>
+
+<p>Secondo la specifica, il valore predefinito per l'opzione <code>passive</code> è sempre falso. Tuttavia, questo introduce il potenziale per gli ascoltatori di eventi che gestiscono determinati eventi di tocco (tra gli altri) per bloccare il thread principale del browser mentre sta tentando di gestire lo scrolling, con conseguente enorme riduzione delle prestazioni durante la gestione dello scorrimento.</p>
+
+<p>Per evitare questo problema, alcuni browser (in particolare, Chrome e Firefox) hanno modificato il valore predefinito dell'opzione <code>passive</code> in <code>true</code> per gli eventi {{event("touchstart")}} e {{event("touchmove")}} sui nodi a livello del documento {{domxref("Window")}}, {{domxref("Document")}}, e {{domxref("Document.body")}}. Questo impedisce al listener di eventi di essere chiamato, quindi non può bloccare il rendering della pagina mentre l'utente sta scorrendo.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Vedi la tabella di compatibilità qui sotto se hai bisogno di sapere quali browser (e / o quali versioni di quei browser) implementano questo comportamento alterato.</p>
+</div>
+
+<p>Puoi sovrascrivere questo comportamento impostando esplicitamente il valore di <code>passive</code> a <code>false</code>, come mostrato qui:</p>
+
+<pre class="brush: js">/* Feature detection */
+var passiveIfSupported = false;
+
+try {
+  window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } }));
+} catch(err) {}
+
+window.addEventListener('scroll', function(event) {
+  /* do something */
+  // can't use event.preventDefault();
+}, passiveIfSupported );
+</pre>
+
+<p>Nei browser meno recenti che non supportano il parametro <code>options</code> su <code>addEventListener()</code>, il tentativo di utilizzarlo impedisce l'utilizzo dell'argomento <code>useCapture</code> senza utilizzare correttamente il <a href="#Safely_detecting_option_support">rilevamento delle funzionalità</a>.</p>
+
+<p>Non è necessario preoccuparsi del valore di <code>passive</code> per l'evento di base {{event("scroll")}}. Poiché non può essere annullato, i listener di eventi non possono comunque bloccare il rendering della pagina.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specificazione</th>
+   <th>Stato</th>
+   <th>Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Definizione inziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.removeEventListener()")}}</li>
+ <li><a href="/en-US/docs/DOM/Creating_and_triggering_events">Creazione e attivazione di eventi personalizzati</a></li>
+ <li><a href="http://www.quirksmode.org/js/this.html">Maggiori dettagli sull'uso di <code>this</code> nei gestori di eventi</a></li>
+</ul>