addEventListener () of the third parameter

In JS, we can add the event to listen to a target dom

DOM event flow

When an event occurs, the spread (propagation) between child elements, and parent elements. This propagation is divided into three phases:

• Capture Stage: top-down stage event spread to the target node from the window object;
• Phase goal: the real goal is processing node stage events;
• Bubbling phases: phase of the event spread from the bottom up to the target node window object.

Then they were to introduce the event capture and event bubbling these two mechanisms.

To verify the flow of events we can addEventListener()to bind click event method:

What addEventListener () yes?

Event Listeners

So what addEventListener () syntax is?

element.addEventListener(event, function(){}, false);

addEventListener () basically three parameters,

• "Event Name"
• "Event handler" (function executed when the event is triggered)
• "Boolean" value, determined by the Boolean event is a "capture" or a "bubble" mechanism to perform, if not specified, the default is "bubbling."

Then the event is to capture and then bubbling do?

correct

Event passes in two ways: bubbling and capture. Event is to capture and then bubbling

Capture (true): starting from the element node start event, 逐层往下transfer (similar to capture things down)
bubble (false): 逐层向上sequence is triggered (similar float bubbles)

How to use?

Self-summary:

• Js addEventListener in the third parameter is a Boolean value that defaults to false, generally do not write, that is: event bubbling.
• Event passes in two ways: bubbling and capture. Event is to capture and then bubbling
• The bubbling phase, the internal elements of the event will be triggered first, and then trigger the external elements. Namely: the first p element click event trigger, then triggers the click event of the div element. false: from the inside out
• Capture phase, external events will first element is triggered, then the event will trigger internal elements. That is: the div element click event fire first, and then trigger a click event p elements. true: from outside to inside
• Event bubbling: for example, when the form is submitted the form to prevent the jump to other pages will write prevent bubbling. Do check before the form is submitted
• The first parameter is the type of event (such as "click"), the second parameter is the function to call when an event is triggered, the third parameter is a Boolean value. The default is false (bubbling stage of execution) true (the capture phase generated)
• Event bubbling with capture, the third parameter is a Boolean value that defaults to false
• addEventListener () event listener, removeEventListener () Remove Event Listeners

Reference Links:
https://blog.csdn.net/weixin_42554191/article/details/105232740

https://blog.csdn.net/zhangjing0320/article/details/80751622?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

https://blog.csdn.net/khadijiah/article/details/98779710?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task