Il metodo addEventListener

Il metodo addEventListener consente di assegnare a un elemento dei gestori di eventi. Con il suo aiuto, puoi specificare, ad esempio, cosa fare quando si clicca su un pulsante o cosa fare durante la digitazione di testo in un campo di testo. Nel primo parametro specifichiamo il tipo di evento, nel secondo - la funzione che verrà attivata dopo l'evento specificato nel primo parametro. Nel terzo parametro opzionale passiamo le caratteristiche dell'oggetto (once, capture, passive) o il parametro useCapture.

Sintassi

javascriptelemento.addEventListener('tipo di evento', funzione, [caratteristiche oggetto]);
oppure
elemento.addEventListener('tipo di evento', funzione, [useCapture]);

Esempio

Facciamo in modo che quando si clicca su un pulsante venga visualizzato un messaggio:

html<input type="button" id="button" value="cliccami">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click', function() {
  alert('messaggio');
});

Результат:

Esempio

Scriviamo il codice in modo che quando l'input perde il focus venga visualizzato un messaggio con il testo di questo input:

html<input id="input" value="testo">

javascriptlet input = document.querySelector('#input');

input.addEventListener('blur', function() {
  alert(this.value);
});

Результат:

Esempio

Facciamo in modo che quando si clicca su un pulsante il messaggio venga visualizzato nella console solo una volta. A questo scopo utilizziamo il terzo parametro:

html<input type="button" id="button" value="cliccami">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function() {
    console.log('messaggio');
  },
  {
    once: true
  }
);

Esempio

Il parametro passive vieta di chiamare il metodo event.preventDefault durante l'elaborazione dell'evento. Applichiamo il metodo event.preventDefault all'esempio precedente e specifichiamo anche nel parametro passive il valore true:

html<input type="button" id="button" value="cliccami">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('Nessun messaggio');
  },
  {
    passive: true
  }
);

Dopo l'esecuzione del codice vedremo i seguenti messaggi:

javascript'Nessun messaggio';
'Unable to preventDefault inside passive event listener invocation.'

Esempio

Il parametro useCapture con valore true mostra la propagazione degli eventi dall'elemento interno a quello esterno, mentre con valore false - dall'esterno all'elemento interno. Quando si passa il parametro useCapture il suo nome viene omesso e si scrive semplicemente true o false. Vediamo come si propagano gli eventi negli elementi genitore e figlio quando si clicca su di essi:

html<div id="parent">Genitore
  <p id="child">Figlio</p>
</div>

css#parent{
  width: 60px;
  padding: 10px;
  border: 1px solid red;
  text-align: center;
}
#child{
  width: 60px;
  marging-right: 40px;
  border: 1px solid blue;
  text-align: center;
}

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
  () => alert('genitore'), 
  true
);
child.addEventListener('click',
  () => alert('figlio'), 
  true
);

Результат:

Vedi anche