Attaching an event handler in jQuery. Directly linked or delegated

Question

I am making a single page application. When the hash changes, new elements are loaded into the page via ajax.

I want to install an event handler for new elements. There are two ways.

• Each event handler is delegated at startup.

  $("body").on(event, "element", handler)

• Whenever the hash changes, the event handeler is directly linked to the new element. Thus, the binding and removal of handlers are repeated.

  $("element").on(event, handler)

What's better? (the time spent by the items compared to the repeated time to remove the binding) (Sorry, my English is poor ...)

Answer 1

This may help get more information about how this one-page application works, but you might consider these guidelines.

• How dynamic is your page? If it is quite static (does not change, it may be premature optimization)
• How many DOM elements are there? The more DOM elements you need to connect individually, the more work needs to be done, more memory consumption, etc.
• How deep are your DOM elements nested? A deeper nesting means more bubble events.
• If an element is found by id, the search from the point of view of jQuery is extremely fast, because the names of the identifiers of the DOM elements must be unique and usually use their own getElementById method.
• If you find elements by tag, you should have one body tag, but you can have several hundred div tags if that is what you select.
• When you're still not sure, it's time to use the Chrome Developer Tools to help you further tune and diagnose potential performance issues that may arise.
• The jQuery selector mechanism is extremely powerful and flexible, but not all selectors do the same. You can write a gnarly selector that unnecessarily loads the browser unnecessarily.

In general, I usually use event delegation when I need a large group of elements in order to behave the same for a given event.

Hope this was helpful.