DOMThere are three stages in event flow ( event flow): event capture stage, target stage, and event bubbling stage.
DomThe triggering sequence of the standard event stream is: capture first and then bubble. That is, when an event is triggered dom, the event is captured first, and then the event source is captured and then bubbled through event propagation.
The third parameter of addEventListener is generally used in the methods we usually use addEventListener. One is the event that needs to be bound, and the other is the function to be executed after the event is triggered. However, the addEventListenerthird parameter can also be passed in. parameter:
element.addEventListener(event, function, useCapture);
The default value of the third parameter is false, which means calling the event processing function in the event bubbling stage; if the parameter is true, it means calling the processing function in the event capturing stage. If the third parameter is not written, the event processing function will be called during the event bubbling stage by default.
Let’s first introduce event bubbling:
1. Event bubbling
事件冒泡（dubbed bubbling）: When an element receives an event, it will pass the event it received to its parent until ( windownote that only events are passed here, such as click、focuswaiting for these events, and the bound event function is not passed .)
Event source => root node (from inside to outside) for event propagation.
for example:
Bind click events to the three boxes in turn. When the box is clicked, the click events of the parent elements will be triggered in turn.
click small box
click center box
click big box
If the parent element does not bind a click event, only the click event of the box will be triggered.
click small box
If the click event of the child element ( ) is removed, the click event of the current operation will be passed to the parent element when smallwe click (because the parent element is bound to the click function)small
click small box
Sometimes we don’t want event bubbling, so we can add e.stopPropagation() to the sub-event to cancel the bubbling.
click small box
2. Event capture
事件捕获（event capturing）: When the mouse clicks or doman event is triggered (the element that triggers domthe event is called the event source), the browser will propagate the event from the root node => event source (from outside to inside).
Event capturing is similar to event bubbling. The biggest difference lies in the direction of event propagation.
Let’s take the above example:
click small box
3. Event delegation
事件委托Also known as 事件代理. Just use it to 事件冒泡bind the events of the child elements to the parent element. If child elements prevent the event from bubbling, then delegation cannot be implemented.
Principle implementation:
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
Application scenario: 1000A buttonclick event needs to be registered
If you add click events to each button in a loop, it will increase memory consumption and affect performance.
At this time, you can buttonadd a click event to the parent element
At this time, it is equivalent to each button being bound to a click event.
advantage:
1. Replace the operation of cyclic binding events to reduce memory consumption and improve performance. For example: * tableDelegate all tdevents on click. * ulDelegate all lievents on click.
2. Simplified domthe update of corresponding events when updating nodes. liFor example: * There is no need to bind events to newly added ones click. * When deleting something li, there is no need to move and unbind the above clickevent.
shortcoming:
1. Event delegation is based on bubbling and does not support events that do not bubble.
2. There are too many levels. During the bubbling process, it may be blocked by a certain layer.
3. Theoretically, delegation will cause the browser to frequently call the processing function, although it may not need to be processed. Therefore, it is recommended to entrust the agent nearby, such as tablean agent on the Internet td, rather than documentan agent on the Internet td.
at last
I compiled a set of "Interview Guide for Front-End Major Companies", which includes HTML, CSS, JavaScript, HTTP, TCP protocol, browser, VUE, React, data structure and algorithm. There are 201 interview questions in total, and I have made an answer for each question. Answer and analysis.
Friends in need can click on the card at the end of the article to receive this document and share it free of charge
Part of the document display:
The length of the article is limited, so the following content will not be shown one by one.
Friends in need can click on the card below to get it for free