Shulou(Shulou.com)06/02 Report--

This article will explain in detail what are the three stages of the DOM event stream. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

When events occur, they are propagated in a specific order between element nodes, which is called DOM event flow.

The DOM event flow is divided into three phases, which are:

Capture phase: the phase in which events propagate from the top down of the Document node to the target node

Target phase: the stage in which the real target node is dealing with the event

Bubbling phase: the stage in which events propagate from the target node down to the Document node.

Capture phase:

Document {overflow: hidden; width: 300px; height: 300px; margin: 100px auto; background-color: pink; text-align: center;} .son {width: 200px; height: 200px; margin: 50px Background-color: purple; line-height: 200px; color: # fff;} son box var son = document.querySelector ('.son'); son.addEventListener ('click', function () {console.log (' son');}, true); var father = document.querySelector ('.room') Father.addEventListener ('click', function () {console.log (' father');}, true); document.addEventListener ('click', function () {console.log (' document');}, true)

The output from the console is:

You can see that the capture phase event propagates from the Document node to the target node from top to bottom.

Bubbling stage:

Var son = document.querySelector ('.son'); son.addEventListener ('click', function () {console.log (' son');}, false); var father = document.querySelector ('.son'); father.addEventListener ('click', function () {console.log (' father');}, false) Document.addEventListener ('click', function () {console.log (' document');})

The output from the console is:

You can see that the bubble phase event propagates from the target node to the Document node from top to bottom.

Note:

1. JS code can only perform one of the stages of capture or bubbling (either capture or bubbling)

2. Onclick and attachEvent (ie) can only get the bubble phase.

3. If the third parameter of addEventListener (type, listener [, useCapture]) is true, it means that the event handler is called during the event capture phase; if it is false (the default is false if not written), the event handler is called during the event bubbling phase.

4. in actual development, we seldom use event capture, and we pay more attention to event bubbling.

5. Some events are not bubbling, such as onblur, onfocus, onmouseenter, onmouseleave

6. The bubbling of events can sometimes cause trouble, but it can be stopped by: stopPropagation ()

The stopPropagation () method: terminates the further propagation of the event during the capture, target processing, or bubbling phase of the propagation process. After the method is called, the handler that handles the event on the node is called and the event is no longer dispatched to another node.

This is the end of the article on "what are the three stages of DOM event flow". I hope the above content can be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.