Implementando la carpeta "en vivo" de jQuery con Javascript nativo

Question

Estoy tratando de encontrar la manera de vincular un evento con elementos creados dinámicamente. Necesito que el evento persista en el elemento incluso después de que se haya destruido y regenerado.

Obviamente, con la función de jQuery en vivo es fácil, pero ¿qué iban a parecerse a cabo con Javascript nativa?

Answer 1

Aquí está un ejemplo sencillo:

function live(eventType, elementId, cb) { 
    document.addEventListener(eventType, function (event) { 
     if (event.target.id === elementId) { 
      cb.call(event.target, event); 
     } 
    }); 
} 

live("click", "test", function (event) { 
    alert(this.id); 
}); 

La idea básica es que desea adjuntar un controlador de eventos para el documento y dejar que el cuadro del evento hasta el DOM. Luego, verifique la propiedad event.target para ver si coincide con los criterios deseados (en este caso, solo que el id del elemento).

Editar:

@shabunc descubrieron un problema bastante grande con mis eventos solution-- sobre elementos secundarios no se detectará correctamente. Una forma de solucionar este problema es mirar a elementos antecesores para ver si alguno ha especificado id:

function live (eventType, elementId, cb) { 
    document.addEventListener(eventType, function (event) { 
     var el = event.target 
      , found; 

     while (el && !(found = el.id === elementId)) { 
      el = el.parentElement; 
     } 

     if (found) { 
      cb.call(el, event); 
     } 
    }); 
} 

Answer 2

, además del puesto de Andrew y el comentario de Binyamin, tal vez esta es una opción:

Con esto se puede use 'nav .item a' como selector. Basado en el código de Andrew.

function live (eventType, elementQuerySelector, cb) { 
    document.addEventListener(eventType, function (event) { 

     var qs = document.querySelectorAll(elementQuerySelector); 

     if (qs) { 
      var el = event.target, index = -1; 
      while (el && ((index = Array.prototype.indexOf.call(qs, el)) === -1)) { 
       el = el.parentElement; 
      } 

      if (index > -1) { 
       cb.call(el, event); 
      } 
     } 
    }); 
} 



live('click', 'nav .aap a', function(event) { console.log(event); alert('clicked'); }); 

Answer 3

Una alternativa para vincular un evento dinámicamente a un elemento específico podría ser un detector de eventos global. Por lo tanto, cada vez que actualice el DOM con otro evento de elemento nuevo en ese elemento también lo "atrapará". Un ejemplo:

var mybuttonlist = document.getElementById('mybuttonlist'); 
 

 
mybuttonlist.addEventListener('click', e=>{ 
 
    if(e.target.nodeName == 'BUTTON'){ 
 
    switch(e.target.name){ 
 
     case 'createnewbutton': 
 
     mybuttonlist.innerHTML += '<li><button name="createnewbutton">Create new button</button></li>'; 
 
     break; 
 
    } 
 
    } 
 
}, false);

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<ul id="mybuttonlist"> 
 
    <li><button name="createnewbutton">Create new button</button></li> 
 
</ul>

En este ejemplo tengo un detector de eventos en el <ul> de eventos de clic. Entonces, ocurre un evento para todos los elementos secundarios. Desde el simple controlador de eventos que creé, puede ver que es fácil agregar más lógica, más botones (con nombres diferentes o repetidos), anclajes, etc.

Yendo all-in, puede agregar el eventlistener al documento en lugar de el elemento de lista, capturando todos los eventos de clic en la página y luego manejando los eventos de clic en el controlador de eventos.