DOM Objeto de evento


Ejemplo

Para acceder al objeto de evento, incluya un parámetro de event en la función de devolución de llamada del detector de eventos:

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!');
});

ya que el niño detiene la propagación del evento, y los eventos se escuchan durante la fase de propagación, haciendo clic en el niño solo activará al niño. sin detener la propagación se activarán ambos eventos.


e.preventDefault ();

El método event.preventDefault() detiene la acción predeterminada de un elemento para que no ocurra.

Por ejemplo:

  • Evitar que un botón de envío envíe un formulario
  • Evita que un enlace siga la 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 el destino actual para el evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elemento al que se ha vinculado el controlador de eventos, en contraposición a event.target, que identifica el elemento en el que se produjo el evento.

en otras palabras

e.target devolverá lo que desencadena el dispatcher de eventos para desencadenar

e.currentTarget devolverá lo que asignó a su oyente.

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);
});

si haces clic en my-button ,

  • e.target será my-button
  • e.currentTarget será body