javascript - How do I update to addEventListener? - Stack Overflow

admin管理员组

文章数量:1295314

I'm about to update my code to use addEventListener() over just writing to the element property in Javascript.

Before I do this I wanted to verify a few things.

1. I'm assuming that I do not have to call removeEventListener(), if I update the DOM and remove the elements ( by .innerHTML write ).

2. addEventListener is supported on the popular modern browsers - IE9, Chrome, Firefox, Safari

3. There are no other issues that might arise on modern browsers.

I'm asking because I don't want to jump the gun in updating my code.

Notes:

property to event correlations ( remove the on ).

• onkeypress - keypress
• onblur -> blur
• onfocus -> focus

Research

.addEventListener ( Has patibility Chart )

.html

Related

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

Notes

• Instead of returning false. Use preventDefault() to stop forms from submitting on enter.

I'm about to update my code to use addEventListener() over just writing to the element property in Javascript.

Before I do this I wanted to verify a few things.

1. I'm assuming that I do not have to call removeEventListener(), if I update the DOM and remove the elements ( by .innerHTML write ).

2. addEventListener is supported on the popular modern browsers - IE9, Chrome, Firefox, Safari

3. There are no other issues that might arise on modern browsers.

I'm asking because I don't want to jump the gun in updating my code.

Notes:

property to event correlations ( remove the on ).

• onkeypress - keypress
• onblur -> blur
• onfocus -> focus

Research

https://developer.mozilla/en/DOM/element.addEventListener ( Has patibility Chart )

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

Related

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

Notes

• Instead of returning false. Use preventDefault() to stop forms from submitting on enter.

• javascript
• dom-events
• addeventlistener

Share Follow edited Jan 15, 2022 at 17:15 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 17, 2012 at 15:23 CS_2013CS_2013 1,16844 gold badges1313 silver badges2525 bronze badges 4

• your assumptions are correct...go for it...btw, store a copy of the current file in case you aren't! – Parth Thakkar Commented May 17, 2012 at 15:25
• Alright....if there are any issues...I'll post them here. – CS_2013 Commented May 17, 2012 at 15:26
• @CS_2013 For addEventListener, it's keypress. Also, you might want to use jQuery for making things cross-browser. Under the hood it uses addEventListener if possible, can fall back to attachEvent for older IE and also normalizes your event object, so you don't have to worry about differences. – kapa Commented May 17, 2012 at 15:48
• @baz - I'm not targeting Pre-IE9...but good info. to know...thanks – CS_2013 Commented May 17, 2012 at 15:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

1) You don't need to call removeEventListener for that matter but you will need to call removeEventListener if you remove the DOM element attached to the eventListener via addEventListener, if you remove any of its children you don't need to remove anything.

2) addEventListener is supported on all major browsers

3) There are no other issues on modern browsers related to addEventListener

4) onkeypress is not the name of an event but an attribute, the event name is keypress. Same for other names on* alike

A quick code to avoid jQuery for cross-browser patibility:

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

1. You don't have to. If you don't store references to the DOM element (in accidental global variables for example), the garbage collector should clean it up.

2. That's the browser support. For older IEs there is attachEvent() which does almost the same.

3. Nothing that you should worry about. This is the modern way to go.

Note: you might want to use jQuery for making things cross-browser. Under the hood it uses addEventListener if possible, can fall back to attachEvent for older IE and also normalizes your event object, so you don't have to worry about differences. It is also great for DOM manipulation and traversal.

本文标签： javascriptHow do I update to addEventListenerStack Overflow