Home > Developer > JavaScript
This section highlights: 1. Event-handling mechanisms for intervention systems (i) DOM Event flow
(ii) Stop event bubbling
(iii) default behavior for blocking events
1. event handling mechanism of the intervention System (i) DOM event flowThe DOM model is a tree structure, and in the DOM model, the HTML elements are hierarchical. When an event is generated on an HTML element, the event propagates in a specific order between the element node and the root node in the DOM tree, and the node that passes through the path receives the event, which is the DOM event stream.
The DOM event standard defines two kinds of event streams, namely, capturing events and bubbling events.
1. Bubbling Event Stream
By default, events use the bubbling event stream. When an event, such as a click event, is triggered on a DOM element, the event bubbles through the entire DOM node hierarchy along the node's parent nodes. The bubbling of events can be terminated at any time during the bubbling process. If you do not stop the propagation of an event, the event continues to bubble through the DOM until it reaches the document root.
(Bubbling upwards)
2. Capturing the event stream
In the case of the bubbling model, in the capture event flow model, the processing of the event begins at the root of the DOM hierarchy, rather than starting with the target element that triggered the event, which is passed down sequentially from all ancestor elements of the target element. In this process, events are captured from the root of the document to the elements of each inheritance derivation between the event target elements.
(Capture goes down)
The 3.DOM standard event model
The DOM standard supports both the capture event model and the bubbling event model, but the capture event model occurs first. Both event streams trigger all objects in the DOM, starting with the document object and ending at the Document object.
4.3 Stages of event conduction
(1) Event capture (capturing) Stage: Events are routed down the DOM tree, passing through each ancestor node of the target node, up to the target node. For example, if a user clicks a hyperlink, the Click event is forwarded from the document node to the HTML element, the BODY element, and the P element that contains the link. The target node is the DOM node that triggers the event.
(2) Target stage: During this phase, the event is transmitted to the target node. The browser runs the listener after it finds a listener that has been assigned to the target event.
(3) bubbling (bubbling) Stage: The event will be forwarded up the DOM tree, once again accessing the ancestor node of the target element until the document node. Each step in the process, the browser detects and executes the event listeners that are not capturing the event listener. (That is, event listeners that are not related to triggering events are also due to bubbling will be executed).
(ii) Stop event bubblingWhen an event, such as a click event, is triggered on a DOM element, the event bubbles through the entire DOM node hierarchy along the node's parent node until it encounters a node attached to the event type processor.
<! DOCTYPE html> <title>Test</title> <meta charset= "Utf-8" > <link rel= "stylesheet" type= "Text/css" href= "Style.css" > <script type= "Text/javascript" src= "Jquery.js" ></script> <script type= "Text/javascript" > function dosometing (obj,evt) { alert (obj.id); //Do browser compatibility var e = (evt)? evt:window.event; Get an event for IE or non-IE browser if (window.event) {//If it is IE browser E.cancelbubble = true; IE Browser, set this property to True to cancel event bubbling }else{ E.stoppropagation (); Non-IE, the method cancels the event for further capture or bubbling. } } </script> <body> <div id= "Parent1" onclick= "alert (this.id); style=" Width:250px;background-color: #cacaca "> <p>this is Parent1 div</p> <div id= "Child1" onclick= "alert (this.id); style=" Width:200px;background-color:orange "> <p>this is child1. Would bubble.</p> </div> </div> <br> <div id= "Parent2" onclick= "alert (this.id);" style= "Width:250px;background-color:cyan;" > <p>this is Parent2 div</p> <div id= "child2" onclick= "dosomething (this,event); style=" Width:200px;background-color: #aeaeae "> <p>this is child2.</p> </div> </div> </div> </body> |
, the above code defines 4 Div, 2 of which are parent div,2 sub-Div. Clicking each div will pop up a message box showing its ID. When you click Child1 and Child2, events bubble through to their parent elements parent1 and Parent2. As a result, clicking Child1 will pop up two message boxes. When you click Child2, the Dosomethig function is called, using the Cancelbubble property or the Stoppropagation () method to stop event bubbling.
(iii) default behavior for blocking eventsThe default behavior of an event is the default action associated with the event that the browser automatically executes after event delivery and processing is complete. For example, clicking the default behavior of a hyperlink is to access its defined URL.
The default behavior of IE and other browsers to block events is different. In IE, you can block the default behavior of events by setting the ReturnValue property of the event object to False, and in other browsers, you can do this by setting the Preventdefault () method of the event object.
<! DOCTYPE html> <title>Test</title> <meta charset= "Utf-8" > <link rel= "stylesheet" type= "Text/css" href= "Style.css" > <script type= "Text/javascript" src= "Jquery.js" ></script> <script type= "Text/javascript" > Window.onload = function () { var test = document.getElementById (' test '); Test.onclick = function (e) {//execute this function when you click this hyperlink Alert (' URL: ' + this.href + ', will not jump '); Stopdefault (e); } } function Stopdefault (e) { if (e && e.preventdefault) {//Judging browser is non IE browser E.preventdefault (); Using the Preventdefault method in a non-IE browser }else{ IE browser ordered event (window.event) The ReturnValue property is false; Window.event.returnValue = false; } return false; } </script> <body> <a href= "http://www.baidu.com" id= "Test" > Baidu </a> </body> |
The Preventdefault property of the event object can be used to determine whether the browser supports the Preventdefault () method. If the Preventdefault property value is true, support is not supported.
JavaScript events-Bubbling, capturing
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
