Event capture

Looking for listeners from outside in an element is called event capture

The event bubbling

Looking for listeners inside and out of elements is called event bubbling

Div. AddEventListener (‘click’,fn,true) if you pass true at the end of the event binding, the browser will call div. AddEventListener (‘click’,fn,true).

If the event is not passed or false is passed at the end of the event binding, the event bubble is called when the browser detects that the div is listening during the bubble phase

div.addEventListener('click',fn)
div.addEventListener('click',fn,false)
Copy the code

There is an exception, however, if only one div is being listened on (regardless of both the parent and the child being listened on at the same time). Fn listens for click events in the capture and bubble phases, respectively

div.addEventListener('click',fn)
div.addEventListener('click',fn,true)
Copy the code

This is a special case where whoever listens first is restricted (bubble first)

Target is different from currentTarget

E.telget The element operated by the user. E.currenttarget The element listened by the programmerCopy the code

Cancel the bubbling

Capture cannot be cancelled, bubble can be e. topPropagation interrupt bubble