Delegation and binding: is there a pleasant place to work?

Question

I am optimizing a rather large chunk of jQuery code in the fog. I need help.

In particular, I have a lot of elements that I want to drag and drop. I decided to use event delegation to minimize load time, as it was briefly discussed here . The problem is that runtime performance is a little damaged because the browser needs to initiate drag and drop at runtime.

Is it possible to use delegation during page loading, and then, if the browser is inactive, the elements will be gradually dragged through the binding? (Some kind of smart asynchronous binding.) This way I get high load and high performance at runtime.

Or is there an even better approach?

Answer 1

You should just stick with delegation. There should be a minimal / almost non-existent performance drop to handle the event after it bubbled. However, it will be absolutely fine if you end up binding the handler to a lot of elements, as you indicate what you are doing, no matter how slowly you do it. Is there any other concentrate that you don't see treating the delegate as a complete solution? I sat here, thinking a little, but I can’t recall any problems with a particular edge case that arise because of this, except i.e. Below is a failure when an event is triggered, in which case you are still screwed in all ways. You just have to add one handler to the parent or to the window, and I don’t see how this can cause problems at any time.

$(selector).live("event names", handler); 

which coincides with

 $(window).delegate(selector, "event names", handler) 

Both of them associate only one event handler with one DOM element.

I re-read the question several times, and I'm not sure that you are just not sure how event delegation works, or if I missed something in reading, so I apologize if I missed it.

When you use the delegate handler, you create an event listener for the common parent. DOM events flow through the parent chain to window , which allows you to have one function that listens for events on many elements (if you bind a handler to window , then you get pinged every time one of these events is triggered, it does not explicitly stop bubbling). An event will determine which element it was originally aimed at, so the delegate handler simply checks all the event targets in relation to those to which it was assigned, and then directs them when it finds a suitable event. It's just something like targetElement["on"+event.name].call(targetElement, event) (libraries like jQuery do some extra stuff for you, but that's the point). Monitoring such events costs almost nothing so as not to cause any problems.

The benefits are manifold, but two big:

• You have only one event handler at one DOM input point, consuming memory and processor periods. With how event bubbles and many other problems, having copies of an event handler looking at different elements is always worse, much worse.

• You can bind events to those elements that do not yet exist. Since you can identify them using characteristics such as selectors, you can customize a handler based on this material (usually this is how it is done). If you want to bind an event to a specific element without using delegate processing, you must have an element creation handler and an event binding handler to bind handlers to newly created elements, which are also huge overhead.

There are a few exceptions where there are problems caused by delegation. The one that occurs in IE8 and below causes problems with mouse input and leaves it possible to not start correctly. These are cases that demonstrate the need to use something like jQuery specifically when it comes to normalizing DOM quirks. At the moment, if you are not trying to support