DOM Oggetto evento


Esempio

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