I will try to show differences between standard event handling (direct ) and delegated, I will compare performance, advantages and disadvantages.
I. About those two methods
Standard event handling is to add event listener directly to DOM element which will be handled. In pure js adding listener looks like:
//here event handling code
Delegated event handling is adding handler on parent element ( can be grandparent or more 😉 ) of our target one, and check what target started event. It uses event propagation which means that event is propagated from element most nested on which event was fired to root of DOM tree. Example event delegation:
//here event handling code
Here example of using both on the same element:
Notice that delegated event is always after standard event. It is exactly what i mention event propagation from most nested to root of DOM, this is called event bubbling and this example show propagation in visual way:
Notice also i use https://github.com/StartCodingPL/startjs repository to easy print messages on examples.
In code exists two examples, first with not complex html where our button has no elements inside it and second where our button has nested structure. To check performance i use – https://github.com/maciejsikora/Speeder.
Second example is more difficult for delegated event because in event handler programmer must search for target, when clicked – e.target is set on most nested element, so it can be something else then wanted button it can be something inside button. So handler is doing loop in findInParents method and search for our wanted button in parents of target. This operation is more complex in code and has weaker performance than standard event where we have our element without any searching.
Performance is clear, standard event is always faster, difference are in miliseconds so no visible difference for user, but performance win is for standard event. Why is faster? There are two things cousing it:
- Direct event run first – events run from most nested so binded parent will be always after children
- Delegated event must do some code to determine on which DOM element event called.
III. Bigger performance test.
Open browser console for this example.
In this test I created 50000 buttons and add direct listeners to every one and add one delegated listener for parent element.
Performance test for add listeners is clear, about 200 ms ( Chrome ) better is delegated. This is logic, standard listeners are added in loop on 50000 elements, delegated is added ones. Point for delegate.
Triggering event shows the same results as previous examples – standard event is slightly faster then delegated. Even on 50000 elements and 50000 listeners, so for sure adding many listeners is not hits in performance.
IV. Dynamic DOM structure
When our structure is dynamic, our elements are added or deleted then using direct event handlers can be diffcult, right behind any changing of DOM must be added event handler to this element. So every add button needs bind button, add button, bind button… . This is more difficult to manage and more complex in code.
Here is dynamic structure with usage of standard ( direct ) event handler:
So every time button is added must be binded for click event, if not -nothing will happen after click because previous binding are added only on buttons binded before.
The same thing but with event delegation:
When using delegated events no need to bind button after adding to page. So our event is working with current and new element which are added to DOM structure.
Dynamic structure event handling is for sure for event delegation, this way has advantages with less code and better event managing without dynamic bindings. +1 for event delegation.
V. When use it.
Use standard event handler if:
- binded elements are static and will not change
- binded element has very nested structure and our delegation needs to come up with many levels
Use delegated event handler if:
- binded elements are dynamic and new one can be attached to structure
- binded element has no children elements inside it or nested structure is easy to manage
- there are big amount of elements to bind
Those two methods are not exclusive, programmer should always think which of them is better for situation. Event delegation not always is better way, so use both methods with thinking which one is best for current task.