Front End-"learning experience"-talk about event bubbling and event capture

Source: Internet
Author: User


<! doctype html> <html> <head> <meta charset= "Utf-8" > <meta http-equiv= " X-ua-compatible " content=" ie=edge,chrome=1 "> <title>Examples</title> <meta name=" Description " content=" "> <meta name=" keywords " content=" "> <link href=" "  rel= "stylesheet" > <style>       #father {           width:300px;           height: 300px;           margin: 0 auto;           border: 1px solid  #000;      }       #son {           width: 100px;           height: 100px;           margin: 0 auto;           border: 1px solid  #000;      } </style> </head> <body>      <div  id= "Father" >     <div class= "C"  id= "son" ></div>      </div> </body> <script>           var  father=document.getelementbyid ("father");      father.addeventlistener ("click", Function (e) {           console.log (e.eventphase);           console.log (;           console.log ("father");
},true) Father.addeventlistener ("Click", Function (e) {console.log (e.eventphase);           Console.log (; Console.log ("father");
},false) var Son=document.getelementbyid ("Son");           Son.addeventlistener ("click", Function (e) {console.log ("son");      Console.log (e.eventphase); }) </script> </html>

First put the code, you create an arbitrary HTML file, such as a.html, and then put this piece of code in.

Open with Chrome browser and review the elements, the final interface is as follows:

This gives two layers, one id=father, the outermost layer, and the other Id=son the innermost layer.

By the way, the browser's event delivery type is briefly described.

Microsoft and early Netscape used event bubbling and event capture, and then formed the current browser's event mechanism.

Event bubbling means that when I click Son, son receives this event message and passes it to father,

Event capture is the opposite, first father receives the event, then son.

Then ES (the standard JS,ECMA java script) specifies the sequence of events to be captured first, then to event processing, and then to the bubbling phase.

Does that mean I'm going to go through father and then go to son and then bubble to father after a click event?

We know that the DOM2 method for element snooping is Xx.addeventlistener ("event name", "handler function", "whether capture")

By default, the third parameter is false, which means that it is not captured and only bubbled.

Return to our code, you can see me here to father write two listener functions, one is capture, one is bubbling, then let's click the inner element to see what happens.

You can see the output of the two Father processing function output event object, which is son, sequentially.

I wrote in the Listening function Console.log (e.eventphase), this is the event processing phase

1-Capture 2-Handle 3 bubbling

So here is the output in order. Prove that the browser follows this principle, of course, we usually write event monitoring will not be for the same element of the event write two processing sequence different processing functions, usually write is based on bubbling.

So we take the second listening function off and look at it.

Found only 2, 3 output, again confirms this fact.

The mechanism of event bubbling allows us to write event delegates to replace the same n-element write listener functions that are intrinsic to an element. Event delegate Introduction I'll give it to you later.

Front End-"learning experience"-talk about event bubbling and event capture

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: