Onclick vs addEventListener

Question

Possible Duplicate:
addeventhandler vs onclick

Sono po 'di confusione utilizzando "onclick" "onmousedown" come una proprietà di elementi HTML.

Come ad esempio:

<button onclick="my_JS_function()"></button> 

o

<div onmousedown="my_another_JS_funciton"></div> 

Ma alcune persone dicono che solo modo "corretto" di aggiungere "ascoltatori" sono da

document.getElementById("my_id").addEventListener("onclick", my_JS_function, false); 

Qual è il più modo "corretto" più supportato per farlo?

Answer 1

Quest'ultimo (addEventListener()) è il modo migliore, poiché è possibile allegare più eventi dello stesso tipo allo stesso elemento.

Assegnando a onclick, ecc., Si sovrascriveranno i gestori esistenti.

Answer 2

se si sa già la funzione e elemento è parte di html cioè non vengono aggiunti dinamicamente rispetto al suo bene che si aggiunge funzione inline invece di usare il metodo di chiamata extra, come "addEventListener"

Un'altra cosa da notare

Mentre onclick funziona con tutti i browser, addEventListener non funziona nelle versioni precedenti di Internet Explorer, che utilizza invece attachEvent.

OnClick è un DOM Level 0 proprietà. AddEventListener fa parte della definizione di livello DOM livello 2. Leggere su questo: http://www.w3.org/TR/DOM-Level-2-Events/events.html

gestori di eventi in linea aggiunti come attributi tag HTML, ad esempio:

<a href="gothere.htm" onlick="alert('Bye!')">Click me!</a> 

Le tecniche di cui sopra sono semplici ma hanno alcuni svantaggi: essi consentono di avere un solo gestore di eventi per ogni elemento. Inoltre, con i gestori di eventi in linea si ottiene una separazione molto scarsa del codice JavaScript dal markup HTML.

document.getElementById("my_id").addEventListener("onclick", my_JS_function, false); 

Advatange di questo: è possibile aggiungere gestore di eventi multipli. anche html e javascript separte codice

Per maggiori dettagli si può leggere questo: Adding an Event Handler