javascript--Event Flow (event bubbling and event capture)

1. Event Flow

When the browser developed to the 4th generation, the browser development team encountered a problem: which element of the page would have a particular event? When you click a button, it is obvious that the click event does not just occur on the button, it also occurs on all ancestor elements of the button, such as the container element of the button, the parent element of the container element, or even the entire page document. But which element is the first to receive the event? What is the order of the pages receiving events? This leads to the concept of event flow. The event flow describes the order in which events are received from the page.

2, two models
Netscape and Microsoft have given two different conclusions. Netscape said that the document would receive the event first, presenting an event capture stream. While Microsoft believes that events first occur on the button, an event bubbling stream is presented.

3. Event bubbling : The basic idea is that the event starts at the very beginning of the event's target, triggering it up to the outer (Document object).

Event bubbling: (1) event bubbling allows multiple operations to be centrally processed (adding event handlers to a parent element, avoiding adding event handlers to multiple child elements), and allowing you to capture events at different levels of the object layer

(2) Allow different object colleagues to capture the same event and invoke their own proprietary handlers to do their own thing

Block event bubbling (program is go)

<div onclick= "ShowMsg (this,event)" id= "OutSide" style= "width:100px; height:100px; Background: #000; padding:50px "><div onclick=" ShowMsg (this,event) "id=" InSide "style=" width:100px; height:100px; Background: #CCC "></div></div><script type=" Text/javascript ">//block event bubbling, you click on the gray box, The entire process is only played once dialog box (note vs. default) function ShowMsg (obj,e) {    alert (obj.id);    Stopbubble (e)}//block event bubbling functions function stopbubble (e) {    if (e && e.stoppropagation)        e.stoppropagation ()    Else        window.event.cancelbubble=true}</script>

4. Event capture : In contrast to bubbling, the event firing order is from the outermost object (the Document object) to the innermost object

5.DOM Event Flow : DOM supports both event capture and event bubbling, but event capture occurs first, and two event streams can traverse all objects in the DOM, starting and ending are document objects.

<div class= "Div1" id= "Di1" >    <div class= "Div1" id= "Di2" ></div></div><script type= " Text/javascript ">    function $ (ID) {        return document.getElementById (ID);    }    var Div1 = $ ("di1");    var Div2 = $ ("Di2");//    when the third value is true, the "capture event" is "  bubbling"    div1.addeventlistener ("click", FUN1) if false;    Div2.addeventlistener ("click", fun2);    function fun1 () {        alert ("I am the parent div,di1");        Return true;//true for event capture    }    function fun2 () {       alert ("I am a Child div,di2");       Return true;//true for event capture    }</script>

javascript--Event Flow (event bubbling and event capture)