Event bubbling and event capture

The core of JavaScript is event processing. We often bind events to an object and add event processing functions. If an element and one of its parent nodes process the same event, which one triggers the event first? Undoubtedly, this is decided by the browser.

Suppose an element element1 has a subelement element2.

-----------------------------------| element1                        ||   -------------------------     ||   |element2               |     ||   -------------------------     ||                                 |-----------------------------------

The two elements are bound to the click event. If you click element2, which triggers the Click Event on element1 and element2, which of the two event handlers will execute first? What is the event sequence?

Two Models

Previously, Netscape and Microsoft were different implementations.

In Netscape, element1 is triggered first, which is called event capture.

In Microsoft, element2 is triggered first, which is called event bubbling.

The processing order of the two events is the opposite. Explorer only supports event bubbling, Mozilla, opera 7, and Konqueror. Earlier versions of Opera's and ICAB are not supported.

Event capture

When you use event capture, the parent element is triggered first, and the child element is triggered later. That is, element1 is triggered first, and element2 is triggered later.

| --------------- | ----------------- | Element1 | ----------- | element2/| ----------------------- | event capture | events -----------------------------------

Event bubbling

When you use event bubbling, child-level elements are triggered first, and parent-level elements are triggered later, that is, element2 is triggered first, and element1 is triggered later.

/--------------- | ----------------- | Element1 | ----------- | element2 | ----------------------- | event bubbling | events -----------------------------------

W3C Model

The W3C model neutralization the two. In the W3C model, event capture starts from the top layer when any event occurs until the event is triggered to the event source element. Then, the event bubbles up from the event source until it reaches the document.

|/----------------- | -- | ----------------- | Element1 | --------------- | -- | ----------- | element2/| W3C model | | ------------------------------------------

Programmers can choose whether to use event capture or event bubbling when binding events. The method is to use the addeventlistener function when binding events. It has three parameters. If the third parameter is true, event capture is used. If it is false, event bubbling is used.

For example:

 element1.addEventListener('click',doSomething2,true)element2.addEventListener('click',doSomething,false)

In this way, click element2.

1. When an event is captured from the top to the bottom, the dosomething2 function is executed when element1 adopts the event capture element.
2. After the event Source Element element2 is reached, event bubbles are performed from the bottom to the top. When element2 adopts the event bubbling element, the dosomething function is executed.

For example:

 element1.addEventListener('click',doSomething2,false)element2.addEventListener('click',doSomething,false)

In this way, click element2.

1. Capture events from the top to the end without any elements that use event capture.
2. After the event Source Element element2 is reached, event bubbles are performed from the bottom to the top. When element2 is an element that uses event bubbles, the dosomething function is executed, if element1 is an element that uses event bubbles, the dosomething2 function is executed.

Compatibility with traditional event binding methods

In a browser that supports W3C Dom, the event binding method is generally event bubbling.

 element1.onclick  = doSomething2

IE browser

As mentioned above, ie only supports event bubbling and does not support event capturing. It does not support the addeventlistener function and does not use the third parameter to indicate whether it is a bubble or a capture, it provides another function, attachevent.

element1.attachEvent("onclick", doSomething2);element2.attachEvent("onclick", doSomething);

Events are all bubbling. Therefore, after binding, click element2 and no event capture is performed. The event is bubbling from the bottom to the top, dosomething is executed first, and dosomething2 is executed again.