javascript - Event Listener Remove or Keep - Best Practice - Stack Overflow

admin管理员组

文章数量:1356281

I have quite a few jquery / javascript listeners on my web page and I will reduce them as much as I can. However, for the listeners that remain, there are scenarios where I make them display:none at certain points. Here are my questions:

1) What is best practice regarding listeners, should I add or remove listeners as I show / hide elements?

2) Which is best performance wise?

3) If I end up having lots of listeners, is it best to apply an on listener event to the whole body, or is it best to apply listeners to only things that need listening to?

I have quite a few jquery / javascript listeners on my web page and I will reduce them as much as I can. However, for the listeners that remain, there are scenarios where I make them display:none at certain points. Here are my questions:

1) What is best practice regarding listeners, should I add or remove listeners as I show / hide elements?

2) Which is best performance wise?

3) If I end up having lots of listeners, is it best to apply an on listener event to the whole body, or is it best to apply listeners to only things that need listening to?

• javascript
• jquery
• listener

Share Improve this question Follow edited Apr 17, 2015 at 20:15 Wickey312 asked Apr 17, 2015 at 20:10 Wickey312Wickey312 57666 silver badges1616 bronze badges 1

• 1 If you're going to show it later, hiding would usually be better than removing it all together – adeneo Commented Apr 17, 2015 at 20:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

A general rule of thumb is as follows:

Remove events on teardown.

Since you are not removing the DOM element, the listener should persist, performance wise there is no drawback unless you have hundreds of thousands of listeners.

The time it takes to micromanage hidden elements listeners aren't enough to outweigh any perceived performance gains.

---

1. Remove listeners when you remove elements (teardown).
2. Listen to a generic class applied to multiple elements instead of individual elements, use data attributes to identify them if required.
3. Listen to things that need to be listened to.

---

You can also use event delegation (bubbling) for when you have a large number of children that require listening to by listening on the parent:

$('div').on('click', function (e) {
  // check e.target for specific child node you require listening on
})

1/2) What is best practice regarding listeners, should I add or remove listeners as I show / hide elements? --> Adding/removing events is slow. You can probably benchmark it but the best remendation is to keep them and let the garbage collection handle it in case you delete objects. It saves you code and is probably more readable, plus garbage collection (cleanup) should ideally happen (depending on implementation and a host of other things) when the user is not waiting/interacting.

2) Which is best performance wise? --> See 1. Benchmark it if you're unsure.

3) If I end up having lots of listeners, is it best to apply an on listener event to the whole body, or is it best to apply listeners to only things that need listening to? --> How much. Is your code readable either way? If you end up listening to the entire body, your code will be handling a LOT more events (mouse over every single object, clicks, keyboard inputs etc.) and typically you'll want to then filter out only relevant events and dispatch them to the function. This makes your code very messy (lots of if/then) and will eventually end up costing you way more in performance than what you thought to save. The best thing is to only handle events on the objects that are relevant to your process. Way simpler, way easier, way faster.

本文标签： javascriptEvent Listener Remove or KeepBest PracticeStack Overflow