Implementazione del binder "live" di jQuery con Javascript originale

Question

Sto cercando di capire come associare un evento a elementi creati dinamicamente. Ho bisogno che l'evento persista sull'elemento anche dopo che è stato distrutto e rigenerato.

Ovviamente con la funzione live di jQuery è facile, ma come sarebbero implementati con JavaScript nativo?

Answer 1

Ecco un semplice esempio:

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

L'idea di base è che si desidera collegare un gestore di eventi per il documento e lasciare che la bolla dell'evento il DOM. Quindi, controlla la proprietà event.target per vedere se soddisfa i criteri desiderati (in questo caso, solo che l'elemento id).

Edit:

@shabunc scoperto un abbastanza grande problema con i miei eventi solution-- su elementi bambino non sarà rilevato correttamente. Un modo per risolvere questo problema è quello di esaminare gli elementi antenati per vedere se hanno specificato 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

Oltre al post di Andrea e il commento di Binyamin, forse questa è un'opzione:

Con questo si può usa 'nav .item a' come selettore. Basato sul codice di 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

Un'alternativa al collegamento di un evento a un elemento specifico in modo dinamico potrebbe essere un listener di eventi globale. Quindi, ogni volta che aggiorni il DOM con un altro nuovo evento di elemento su quell'elemento, verranno visualizzati anche i "catture". Un esempio:

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>

In questo esempio ho un listener di eventi sul <ul> per gli eventi click. Quindi, un evento accade per tutti gli elementi figli. Dal semplice gestore di eventi che ho creato, puoi vedere che è facile aggiungere più logica, più pulsanti (con nomi diversi o ripetuti), ancore ecc.

All'ingresso, è possibile aggiungere l'eventlistener al documento anziché l'elemento list, che cattura tutti gli eventi click sulla pagina e quindi gestisce gli eventi click nel gestore eventi.