Home > Developer > JavaScript
1. Events are basically event-driven on the browser client application platform, that is, an event occurs and then actions are taken accordingly. Browser events indicate the signal of some events. The description of the event is not the focus of this Article. If you have not yet understood it, you can visit the W3school tutorial to learn about it. This will help you better understand the following content. 2. What is the bubble mechanism? The following figure shows how the bubble starts to rise from the bottom of the water, from the depth to the shallow, to the top. During the rising process, bubbles will go through the water at different depth levels. Correspondingly: This bubble is equivalent to an event here, while water is equivalent to our entire dom tree. Events are passed from the bottom layer of the dom tree, to the root node of the dom. The following is a simple case study to illustrate the bubble principle: Define an html with three simple dom elements: div1, div2, span, and div2, which contain span, div1 contains div2, which are under the body: [html] <span style = "font-family: Microsoft YaHei; font-size: 10px; "> <body id =" body "> <div id =" box1 "class =" box1 "> <div id =" box2 "class =" box2 "> <span id = "span"> This is a span. </span> </div> </body> </span> The following prototype is displayed. add a click event listener to the body. When the body captures an event, it prints the event occurrence time and node information that triggers the event: [html] <script type = "text/javascript"> window. onload = function () {document. getElementById ("body "). addEventListener ("click", eventHandler);} function eventHandler (event) {console. log ("time:" + new Date (event. timeStamp) + "event generation node:" + event.tar get. id + "current node:" + event. currentTarget. id) ;}</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
