DOM
eventi

Parametri

Osservazioni

introduzione

Definizione:

Nel calcolo, un evento è un'azione o un evento riconosciuto dal software che può essere gestito dal software. Gli eventi del computer possono essere generati o attivati ​​dal sistema, dall'utente o in altri modi. Fonte di definizione

Gli eventi HTML sono "cose" che accadono agli elementi HTML. JavaScript può "reagire" su questi eventi. tramite gli Event Listeners . Inoltre, gli eventi personalizzati possono essere attivati ​​utilizzando dispatchEvent . Ma questa è solo un'introduzione, quindi iniziamo!

Listener di eventi di base

Per ascoltare gli eventi, si chiama target.addEventListener(type, listener);

function loadImage() {
  console.log('image code here!');
}
var myButton = document.querySelector('#my-button');
myButton.addEventListener('click', loadImage);

Ciò attiverà loadImage ogni volta che si fa clic my-button .

I listener di eventi possono essere collegati a qualsiasi nodo nell'albero DOM. per vedere una lista completa di tutti gli eventi attivati ​​nativamente nel browser: vai qui link MDN per la lista completa degli eventi

Rimozione dei listener di eventi

Il metodo removeEventListener () rimuove i gestori di eventi che sono stati collegati con il metodo addEventListener ():

element.removeEventListener("mousemove", myFunction);

Tutto (nome evento, funzione e opzioni) in removeEventListener deve corrispondere a quello impostato quando si aggiunge il listener di eventi all'elemento.

.leggi con removeListener

usando .bind sulla funzione quando si aggiunge un listener di eventi si impedirà la rimozione della funzione, per rimuovere effettivamente l'eventListener che è possibile scrivere:

function onEvent() {
   console.log(this.name);
}

var bindingOnEvent = onEvent.bind(this);

document.addEventListener('click', bindingOnEvent);

...

document.removeEventListener('click', bindingOnEvent);

ascoltare un evento solo una volta

Fino a once opzione è ampiamente supportata, dobbiamo rimuovere manualmente il listener pari una volta che l'evento viene attivato per la prima volta.

Questo piccolo aiuto ci aiuterà a raggiungere questo obiettivo:

Object.prototype.listenOnce = Object.prototype.listenOnce ||
  function listenOnce(eventName, eventHandler, options) {
      var target = this;
      target.addEventListener(eventName, function(e) {
          eventHandler(e);
          target.removeEventListener(eventName, eventHandler, options);
      }, options);
  }

var target = document.querySelector('#parent');
target.listenOnce("click", clickFunction, false);

* Non è una buona pratica associare funzioni al prototipo Object, quindi è possibile rimuovere la prima riga di questo codice e aggiungere un target ad esso come primo parametro.

In attesa del caricamento del documento

Uno degli eventi più comunemente utilizzati è l'attesa del caricamento del documento, inclusi sia i file di script che le immagini. Per questo viene utilizzato l'evento load sul document .

document.addEventListener('load', function() {
   console.log("Everything has now loaded!");
});

A volte si tenta di accedere a un oggetto DOM prima che venga caricato, causando puntatori nulli. Questi sono davvero difficili da eseguire il debug. Per evitare questo, utilizzare invece l'evento DOMContentLoaded document . DOMContentLoaded assicura che il contenuto HTML sia stato caricato e inizializzato senza attendere altre risorse esterne.

document.addEventListener('DOMContentLoaded', function() {
   console.log("The document contents are now available!");
});

Oggetto evento

Per accedere all'oggetto evento, includere un parametro event nella funzione callback listener dell'evento:

var foo = document.getElementById("foo");
foo.addEventListener("click", onClick);

function onClick(event) {
  // the `event` parameter is the event object
  // e.g. `event.type` would be "click" in this case
};

e.stopPropagation ();

HTML:

<div id="parent">
   <div id="child"></div>
</div>

Javascript:

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

child.addEventListener('click', function(e) {
   e.stopPropagation();
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
});

poiché il bambino interrompe la propagazione dell'evento e gli eventi vengono ascoltati durante la fase di bubbling, facendo clic sul bambino si attiverà solo il bambino. senza interrompere la propagazione verranno attivati ​​entrambi gli eventi.

e.preventDefault ();

Il metodo event.preventDefault() interrompe l'azione predefinita di un elemento.

Per esempio:

• Impedire a un pulsante di invio di inviare un modulo
• Impedire a un link di seguire l'URL

var allAnchorTags = document.querySelector('a');

allAnchorTags.addEventListener('click', function(e){
    e.preventDefault();
    console.log('anchor tags are useless now! *evil laugh*');
});

e.target vs e.currentTarget

e.currentTarget Identifica il target corrente per l'evento, poiché l'evento attraversa il DOM. Fa sempre riferimento all'elemento a cui è collegato il gestore eventi anziché a event.target che identifica l'elemento su cui si è verificato l'evento.

in altre parole

e.target restituirà ciò che provoca l'attivazione del dispatcher dell'evento

e.currentTarget restituirà ciò a cui hai assegnato il listener.

HTML:

<body>
   <button id="my-button"></button>
</body>

Javascript:

var body = document.body;
body.addEventListener( 'click', function(e) {
    console.log('e.target', e.target);
    console.log('e.currentTarget', e.currentTarget);
});

se fai clic sul my-button ,

• e.target sarà il my-button
• e.currentTarget sarà il body

Evento che bolle e cattura

Gli eventi attivati ​​sugli elementi DOM non riguardano solo l'elemento a cui sono indirizzati. Qualunque degli antenati del bersaglio nel DOM può anche avere la possibilità di reagire all'evento. Considera il seguente documento:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
  <p id="paragraph">
    <span id="text">Hello World</span>
  </p>
</body>
</html>

Se aggiungiamo solo listener ad ogni elemento senza opzioni, attiviamo un clic sull'intervallo ...

document.body.addEventListener('click', function(event) {
  console.log("Body clicked!");
});
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked!");
});
window.text.addEventListener('click', function(event) {
  console.log("Text clicked!");
});

window.text.click();

... allora l'evento sarà bolla attraverso ogni antenato, innescando ogni gestore click sulla strada:

Text clicked!
Paragraph clicked!
Body clicked!

Se vuoi che uno dei tuoi gestori interrompa l'evento dall'attivazione di altri gestori, può chiamare il metodo event.stopPropagation() . Ad esempio, se sostituiamo il nostro secondo gestore di eventi con questo:

window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked, and that's it!");
  event.stopPropagation();
});

Vedremmo il seguente output, con il gestore di click body mai attivato:

Text clicked!
Paragraph clicked, and that's it!

Infine, abbiamo la possibilità di aggiungere listener di eventi che si attivano durante " capture " anziché bubbling. Prima che un evento esploda da un elemento attraverso i suoi antenati, viene prima "catturato" fino all'elemento attraverso i suoi antenati. Un listener di acquisizione viene aggiunto specificando true o {capture: true} come terzo argomento opzionale per addEventListener . Se aggiungiamo i seguenti ascoltatori al nostro primo esempio sopra:

document.body.addEventListener('click', function(event) {
  console.log("Body click captured!");
}, true);
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph click captured!");
}, true);
window.text.addEventListener('click', function(event) {
  console.log("Text click captured!");
}, true);

Otterremo il seguente risultato:

Body click captured!
Paragraph click captured!
Text click captured!
Text clicked!
Paragraph clicked!
Body clicked!

Per impostazione predefinita, gli eventi vengono ascoltati nella fase di bubbling. Per cambiare questo è possibile specificare in quale fase viene ascoltato l'evento specificando il terzo parametro nella funzione addEventListener. (Per informazioni su come catturare e gorgogliare, consultare i commenti )

element.addEventListener(eventName, eventHandler, useCapture)

useCapture: true significa ascoltare l'evento quando scende nell'albero DOM. false significa ascoltare l'evento mentre sale sull'albero DOM.

window.addEventListener("click", function(){alert('1: on bubble')}, false);
window.addEventListener("click", function(){alert('2: on capture')}, true);

Le caselle di avviso compariranno in questo ordine:

• 2: in fase di acquisizione
• 1: sulla bolla

Casi d'uso del mondo reale

L'evento Capture verrà inviato prima di Bubble Event, quindi è possibile assicurarsi che un evento sia ascoltato per primo se lo si ascolta nella sua fase di acquisizione.

se stai ascoltando un evento click su un elemento genitore, e un altro su suo figlio, puoi prima ascoltare il bambino o il genitore, a seconda di come cambi il parametro useCapture.

nel bubbling, l'evento figlio viene chiamato per primo, nella cattura, il genitore prima

HTML:

<div id="parent">
   <div id="child"></div>
</div>

Javascript:

child.addEventListener('click', function(e) {
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
}, true);

Impostazione true per il genitore eventListener attiverà prima il listener genitore.

Combinato con e.stopPropagation () è possibile impedire all'evento di attivare il listener di eventi figlio / o il genitore. (altro su questo nel prossimo esempio)

Delegazione degli eventi

La delega degli eventi è un processo che ci consente di evitare di aggiungere listener di eventi a nodi specifici; invece, il listener di eventi viene aggiunto al nodo padre. Questo meccanismo utilizza la propagazione dell'evento / bubbling per gestire un evento a un elemento / nodo di livello superiore nel DOM invece di utilizzare l'elemento su cui è stato originato l'evento. Ad esempio, pensiamo che dobbiamo aggiungere eventi per i seguenti elementi dell'elenco:

<ul id="container">
    <li id="item-1" class="new">Item 1</li>
    <li id="item-2">Item 2</li>
    <li id="item-3">Item 3</li>
</ul>

Dobbiamo aggiungere gestori di click e, in sostanza, possiamo aggiungere ascoltatori a ciascun elemento utilizzando un ciclo ma immaginiamo che, desideriamo aggiungere elementi in modo dinamico. Così, registriamo tutti i gestori di eventi quando il DOM è caricato e dopo il DOM inizializza e registra tutti i gestori di eventi per ogni elemento, l'elemento appena inserito nel sopra UL non risponderà al clic, perché questo elemento non era presente nel DOM quando abbiamo registrato i listener di eventi click.

Quindi, per superare questo problema, possiamo sfruttare la delega degli eventi. Il che significa che, invece di registrare gli ascoltatori su ciascuno degli elementi li stessi, possiamo associare il listener di eventi al suo elemento genitore UL , ad esempio:

document.getElementById("container").addEventListener("click", function(e) {
    console.log("List item " e.target.id, " was clicked!");
});

Poiché, l'evento si propaga (bolle verso l'alto) per impostazione predefinita, quindi facendo clic su qualsiasi elemento LI , l'elemento UL attiva anche lo stesso evento. In questo caso, possiamo utilizzare il parametro e nella funzione, che in realtà è l'oggetto evento e contiene informazioni utili sull'evento, incluso l'elemento originale, che ha avviato l'evento. Quindi, per esempio, possiamo usare qualcosa come la seguente:

document.getElementById("container").addEventListener("click", function(e) {

    // If UL itself then no action is require
    if(e.target.nodeName == 'UL') return false;

    if(e.target.classList.contains('new')) {
        console.log("List item " e.target.id, " was clicked and it's new!");
    }
});

Quindi, è ovvio che, e (oggetto evento) consentono di esaminare l'elemento sorgente (e.target) e possiamo facilmente iniettare nuovi elementi per l' UL dopo DOM è stato caricato e l'unico gestore di eventi delegato gestirà tutti gli eventi click all'interno UL genitore, che consuma meno memoria perché abbiamo dichiarato una sola funzione per tutti gli elementi.

Attivazione di eventi personalizzati

L'API CustomEvent consente agli sviluppatori di creare eventi personalizzati e attivarli su nodi DOM, passando i dati lungo la strada.

event = new CustomEvent(typeArg, customEventInit);

typeArg - DOMString che rappresenta il nome dell'evento.

customEventInit: sono parametri facoltativi (che verranno passati come e nel seguente esempio).

È possibile allegare eventListeners al document o qualsiasi elemento HTML.

Una volta che l'evento personalizzato è stato aggiunto e associato all'elemento (o al documento) si potrebbe desiderare di attivarlo manualmente da javascript.

document.addEventListener("event-name", function(e) {
  console.log(e.detail); // logs custom object passed from the event.
});

var event = new CustomEvent("event-name", { "param-name": "param-value" });
document.dispatchEvent(event);