DOM - Event Delegate

Event delegation, also known as event delegation, is a design idea in web design, that is, binding the events of one or a group of elements (target elements) to the parent or ancestor elementsuperior.It is the outer element that actually binds the event, not the target element.

When the event responds to the target element, it will trigger the binding event of its outer element through the event bubbling mechanism, and then execute the function on the outer element.

Event proxy is mainly used to solve the problem of static event binding; to solve the problem of the same business but higher performance consumption.

Benefits of event delegation:

(1) Reduce performance consumption, reduce the memory required for the entire page, and improve overall performance (reduce redundancy and save resources)

(2) Dynamic binding can be achieved to reduce repetitive work

Cons:

(1) Some events (without bubbling feature) cannot be bound with event proxy, such as focus, blur

(2) For events such as mousemove and mouseout, although there is event bubbling, it needs to continuously calculate the position and positioning, which has high performance consumption and is not suitable for event proxy

(3) If all events are delegated by events, event misjudgment may occur, that is, events that should not be triggered are bound to events

Events suitable for event delegation:

click, mousedown, mouseup, keydown, keyup, keypress

For example: do not use event proxy, set the click event to box2 in the normal way, and print out the content when the div of box2 is clicked.

 
box1
box2
box3
box4

The above design has two disadvantages:

1. Static event binding: if an element is added dynamically, the added element does not have this event

2. The performance consumption is higher but the business is the same

But the same requirement we can use event delegate to solve:

 
box1
box2
box3
box4

By means of event proxy, the business of box2 is directly bound to its parent element box1 for execution, which not only improves performance, but also executes this event even for new elements added later.