Registrazione di eventi JavaScript senza utilizzare jQuery

Come fare correttamente qualcosa di simile al seguente senza usare jQuery.

$(document).ready(function(){ $("#someButton").click(function(){ alert("Hello"); }); }); 

Grazie.

Il modo più semplice è:

 // DOM Level 0 way window.onload = function () { document.getElementById("someButton").onclick = function() { alert("Hello"); }; }; 

Questo funzionerà su tutti i browser ma si noti che con questo approccio è ansible associare un solo gestore di eventi a un evento.

Si noti inoltre che l’evento onload non è completamente equivalente all’evento ready di jQuery, l’ onload verrà onload quando tutte le risorse della pagina sono completamente caricate (immagini, sotto-frame, ecc …), mentre i fuochi ready non appena il DOM è stato analizzato

Se si desidera colbind più gestori di eventi, è ansible utilizzare il metodo element.addEventListerner Standard di livello 2 (o element.attachEvent per IE)

L’astrazione più semplice per ottenere un modo cross-browser per associare gli eventi è:

 function addEvent(el, eventType, handler) { if (el.addEventListener) { // DOM Level 2 browsers el.addEventListener(eventType, handler, false); } else if (el.attachEvent) { // IE <= 8 el.attachEvent('on' + eventType, handler); } else { // ancient browsers el['on' + eventType] = handler; } } 

Allora puoi:

 var button = document.getElementById("someButton"); addEvent(button, 'click', function () { alert("Hello"); }); addEvent(button, 'click', function () { alert("world!"); }); 

Si noti inoltre che i metodi addEventListener e attachEvent di IE hanno le loro differenze, quando si collegano più gestori a un evento con addEventListener verranno eseguiti nello stesso ordine, poiché i gestori sono associati (FIFO), attachEvent attiverà i gestori nel ordine contrario (LIFO).

Guarda un esempio qui .

TL; DR

Su un browser moderno:

   

Nota che lo script è dopo il pulsante nell’HTML. Perché importa? Continua a leggere.

 document.getElementById("someButton").addEventListener("click", function() { snippet.log("Hello"); }, false); 
    

Che ne dici di questo?

document.getElementById('someButton').onclick = function () { alert('Hello');}

Questa risposta non è così semplice senza jQuery, perché ci sono due stili principali (a seconda del browser che si sta utilizzando) per il collegamento di eventi. Se non usi uno di questi due stili, i tuoi eventi possono sovrascrivere l’un l’altro. Ecco lo stile più semplice / di sovrascrittura:

 window.onload = function() { document.getElementById("someButton").onclick = function() { alert("Hello"); } } 

Ma se provi e per quanto sopra due volte, riceverai solo un avviso, perché la seconda volta sovrascriverà il primo. In alternativa puoi eseguire alcuni rilevamenti di browser / funzionalità e quindi utilizzare i meccanismi degli eventi specifici per browser specifici; per maggiori informazioni su quello stile, controlla QuirksMode.com:

http://www.quirksmode.org/js/events_advanced.html

prova questo:

    Test clicks    
test

Per quanto ne so, onLoad NON è lo stesso di DOM Ready.

On Load attende tutte le risorse da caricare (immagini, altri file esterni). mentre su DOM Ready attende solo il rendering HTML e non attende il caricamento delle risorse.

Correggimi se sbaglio.