Delegation Pattern#

The delegation pattern is to delegate the event of one or a group of elements to its parent or outermost element using the event bubbling mechanism. The delegation pattern does not belong to the category of the 23 standard design patterns, but is usually considered a general technique-oriented design pattern.

Description#

Event delegation, the delegation pattern is to delegate the event of one or a group of elements to its parent or outermost element using the event bubbling mechanism. The actual bound event is the outermost element. When the event response reaches the element that needs to be bound, it triggers the bound event on its outermost element, and then executes the function on the outermost element.
For example, when multiple roommates in a dormitory receive packages at the same time, one way is for each of them to collect the package one by one, and another way is to delegate this task to the dormitory leader, let one person go out to collect all the packages, and then distribute them to each roommate according to the recipient. Here, receiving the package is an event, each roommate refers to the DOM element that needs to respond to the event, and the dormitory leader who goes out to collect the packages is the delegate element. Therefore, the element that actually binds the event is this element. The process of distributing the packages according to the recipients during the event execution is to determine which one or ones in the delegate element the current responding event should match.

Event Flow Model#

Usually, events are mainly divided into capturing and bubbling. Versions of IE8 and earlier do not support capturing events. The DOM2 event model developed by W3C is the standard model, which supports both capturing and bubbling events, and the calling order of event handling phases is capturing, target, and bubbling in succession.

• Event capturing Event Capturing is a top-down propagation method. Taking the click event as an example, it propagates from the outermost root node to the clicked node, gradually propagating from the outermost node to the innermost node until the target node is reached.
• Event bubbling Event Bubbling is a bottom-up propagation method. Also taking the click event as an example, the event starts from the clicked node and then gradually propagates upwards to the highest-level node.

Event delegation usually uses the bubbling event model. For event bubbling, when an element receives an event, it passes the received event to its parent, all the way to the window. Of course, what propagates is the event, and the bound execution functions do not propagate. If the parent does not have bound event functions, even if the event is passed, it will not have any effect, but the event has indeed been passed. The reason for event bubbling is that the event source itself may not have the ability to handle the event, that is, the function for handling the event is not bound to the event source. It cannot handle the event on its own, so it needs to pass the event out in order to execute the function to handle the event.

Event Delegation#

For example, when receiving a small request to implement a calendar function, where the background color of the grid should turn gray when the user clicks on a date grid. If we bind an event for each date element, it will increase the number of event listeners and inadvertently consume memory, especially in older browsers such as IE6, IE7, IE8, increasing the number of events will impact the user experience. However, for this kind of requirement, event delegation can be fully utilized by bubbling the click event to the outer parent element for processing, and then adjusting the DOM structure according to the bubbled element. In addition, using event delegation can also have some foresight for future changes. For example, if we have a line of text where the content pops up when clicked, and if we add another line of text underneath, we still need to add a click event for it to achieve the popping effect. If we use the event delegation mechanism, we can directly add text without needing to add an event to handle the click event. Furthermore, in older versions of the IE browser, due to the use of reference counting GC garbage collection mechanism, it is possible to cause memory leaks due to the lack of explicit clearing of references to DOM elements. Using event delegation can solve this problem to a certain extent. Below is a simple example of event delegation.

<!DOCTYPE html>
<html>
<head>
    <title>Event Delegation</title>
</head>
<style type="text/css">
    li{
        cursor: pointer;
    }
</style>

<body>
    <ul id="u1">
        <li uid="0">0</li>
        <li uid="1">1</li>
        <li uid="2">2</li>
        <li uid="3">3</li>
        <li uid="4">4</li>
        <li uid="5">5</li>
        <li uid="6">6</li>
        <li uid="7">7</li>
        <li uid="8">8</li>
        <li uid="9">9</li>
    </ul>
</body>

<script type="text/javascript">
    document.getElementById("u1").addEventListener("click",(e) => {
        console.log(e.srcElement.getAttribute("uid"));
    })    
</script>
</html>

Daily Question#

References#