Come si aggiorna ad addEventListener?

Question

Sto per aggiornare il mio codice per utilizzare addEventListener() semplicemente scrivendo sulla proprietà dell'elemento in javascript.

Prima di farlo volevo verificare alcune cose.

1.) Suppongo che non debba chiamare removeEventListener(), se aggiorno il DOM e rimuovo gli elementi (tramite .innerHTML write).

2.) addEventListener è supportato sul popolare browser moderni - IE9, Chrome, Firefox, Safari

3.) non ci sono altri problemi che potrebbero arrise sul browser moderni.

Sto chiedendo b.c. Non voglio saltare la pistola aggiornando il mio codice.

Note:

proprietà correlazioni di eventi (rimuovere l'on).

• onkeypress - Pressione
• onblur -> sfocatura
• onfocus -> concentrarsi

Research

https://developer.mozilla.org/en/DOM/element.addEventListener (ha tabella di compatibilità)

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

correlati

JavaScript listener, "keypress" doesn't detect backspace?

Note

• invece di ritornare falsa. Utilizzare preventDefault() per interrompere l'invio dei moduli su invio.

Answer 1

1. Non è necessario. Se non si memorizzano riferimenti all'elemento DOM (in variabili globali accidentali, ad esempio), il garbage collector dovrebbe pulirlo.

2. Questo è il supporto del browser. Per i vecchi IE c'è attachEvent() che fa lo quasi lo.

3. Nulla di cui dovresti preoccuparti. Questo è il modo moderno per andare.

Nota: si potrebbe desiderare di utilizzare jQuery per fare le cose cross-browser. Sotto il cofano usa addEventListener se possibile, può ricadere a attachEvent per IE precedente e anche a normalizes your event object, quindi non devi preoccuparti delle differenze. È anche ottimo per la manipolazione e l'attraversamento del DOM.

Answer 2

1) Non è necessario chiamare removeEventListener per quella materia, ma sarà necessario chiamare removeEventListener se si rimuove l'elemento DOM attaccato al eventListener tramite addEventListener, se si rimuove uno qualsiasi dei suoi figli don Non c'è bisogno di rimuovere nulla.

2) addEventListener è supportato su tutti i principali browser

3) Non ci sono altre questioni sul browser moderni legati alla addEventListener

4) onkeypress non è il nome di un evento, ma un attributo, l'evento il nome è keypress.Lo stesso vale per altri nomi su * simili

Un codice rapidamente per evitare jQuery per la compatibilità cross-browser:

Element.prototype.on = function(evt, fn) { 
if (this.addEventListener) 
    this.addEventListener(evt, fn, false); 
else if (this.attachEvent) 
    this.attachEvent('on' + evt, fn); 
}; 

Element.prototype.off = function(evt, fn) { 
    if (this.removeEventListener) 
     this.removeEventListener(evt, fn, false); 
    else if (this.detachEvent) 
     this.detachEvent('on' + evt, fn); 
};