Three phases of dom Event bubbling and dom Event capturing

Three phases of dom Event bubbling and dom Event capturing

This article mainly solves two problems:

Click Me

1. What is event stream

2. Three phases of DOM event stream

   Cause

   To be honest, no matter what framework you are, you can't do without DOM, after all, this is the most basic element of your presentation, just like a human cell ). When I think of the dom event stream principle, many people don't understand it. They only know the click mouseout and other practical scenarios. To understand and further develop the front-end, we must: Parallel Theory + practice.

   Of course, DOM events involve a complex set of knowledge, so this article focuses on the difficulties encountered when learning with yourself, DOM event flow.

   Stream

   The concept of stream is everywhere in today's JavaScript. For example, the one-way data stream in React, the stream in Node, or the DOM event stream described in this article. Is a vivid embodiment of the stream. As for the concept of stream, we will use the following explanation:

   In terminology, a stream is an abstraction of an input/output device. From a program perspective, a stream is a data with a direction.

   Event streaming event bubbling and event capture

   During the development of the browser, the development team encountered a problem. Which part of the page has specific events?

   You can draw a group of concentric circles on a piece of paper. If you place your finger on the center of the circle, your finger points to not a circle, but all the circles on the paper. On the actual page, you click a button. In fact, you also click all the parent elements of the button.

   The problem with the development team is: when a button is clicked, is the parent element of the outermost layer of the button receiving and executing the event first, or is the specific element receiving and executing the event first? So the concept of event stream is introduced here.

   Event streams describe the order in which events are received from the page.

   Because there are two ideas, there are two kinds of event streams: Event bubbling and event capture. The current mainstream is event bubbling.

   Event bubbling

   When an event starts to bubble, it is received by the most specific element (that is, the node where the event occurs), and then spread to an unspecified node step by step. For example, it is easy to understand.

   ThenbuttonAnd its parent element, add a click event.

   var button = document.getElementById('clickMe');button.onclick = function() {  console.log('1. You click Button');};document.body.onclick = function() {  console.log('2. You click body');};document.onclick = function() {  console.log('3. You click document');};window.onclick = function() {  console.log('4. You click window');};

   Effect:

   On the page shown in the Code, if a button is clicked, the click event will be transmitted in the following order (Chrome browser ):

   1. Button

   2. Body

   3. Document

   4. Window

      That is to say, the click event firstElement, and then spread up step by step. This is event bubbling.

       

      Event capture

      The concept of event capture is the opposite of event bubbles. It believes that when an event occurs, the parent element should receive the event earlier, and the specific element will finally receive the event. For example, in the demo just now, if the event is captured, the event sequence will be as follows:

      1. Window

      2. Document

      3. Body

      4. Button

         Of course, due to the changing times, the event bubble mode is superior. So use event bubbling with confidence. You can use event capture for special purposes.

         DOM event stream

         The DOM event stream consists of three phases.

         1. Event capture phase

         2. In target stage

         3. Event bubble stage

            (The image originated from the Internet. Please inform us if there is any infringement ):

            1. Event capture phase

            That is to say, when an event occurs, event capture first provides an opportunity for the parent element to intercept the event.

            For example, in the Demo above, the window click event is changed to the event capture mode. (The last parameter of addEventListener,True indicates that the event capture mode is used., False indicates that the event bubble mode is used. If you do not understand it, you can learn how to use the addEventListener function)

            window.addEventListener('click', function() {  console.log('4. You click window');}, true);

            At this point, the effect of clicking a button is as follows.

            As you can see, the click event is intercepted by the parent element first, and the function only takes effect in the event capture phase.

            In the bubble stage of the target and event

            When an event arrives at a specific element, it occurs on a specific element and is considered part of the bubble stage. Then, the event starts to bubble when the bubble stage occurs.

            Prevent event bubbles

            The event Bubbling Process can be blocked. Prevent unnecessary errors and troubles caused by event bubbles.

            This method is:stopPropagation()
            

            WebuttonClick Event to make some modifications.

            Button. addEventListener ('click', function (event) {// event is the event object console. log ('1. you click Button '); event. stopPropagation (); console. log ('Stop Propagation! ') ;}, False );

            After clicking, the effect is as follows:

            It is not hard to see that the event stops bubbling after it reaches the specific element. But does not affect the event capture of the parent element.

            Summary and feelings

            Event stream: Describes the order in which events are received from the page. There are two types of events: Event bubbling and event capturing. Three phases of the DOM event stream:

            1. Event capture phase

            2. In target stage

            3. Event bubble stage

               In the process of learning DOM events, I learned about the three phases of DOM events, what is the use of event bubbles, and how to prevent them. In combination with the previous knowledge about binary trees, we have benefited a lot.