JavaScript event propagation and event bubbling, event model

To tell the truth, I heard the "event bubbling" when I was working, and it took a long time to get a general idea that the child DOM element and the parent DOM element were all bound to the same type of event, and if the child event triggers the parent, then this is called "event bubbling." However, if things are so simple, I believe I must have married mating, when the CEO. Bad is bad in the later heard an "event spread", is not "event bubbling", and then heard the "event model" ... To the end of the author is completely heartbroken, can only obediently when busy farming!!!

Let's talk about the terminology inside, " event capture ," " event bubbling ," " Event propagation ," " Event Registration ," "Eventmodel "

" Event Registration ": There are many ways to register an event, presumably with the following

1, directly on the DOM element Plus, this is actually a very lame way, but the egg, and now still have a lot of kinky in use

<input type="button" onclick="alert (' good ')" name="  button" value=" bash me ">

2. Use JS program to add "onxxx" to DOM element object

<input type="button" id="btn"  name= " Button" value=" bash me ">document.getElementById (  'btn'). onclick = function () {alert (' good to play ');};

3. Use functions such as ' AddEventListener ', ' attachevent '

varDom = document.getElementById ('btn');varhander = function () {alert ('good shot.');};if(Dom.addeventlistener) {Dom.addeventlistener ('Click', hander,false);//supports standard Web browser-specific}Else{dom.attachevent ('onclick', hander);//non-standard Web browser-specific}

4, forcing a higher "event delegation", meaning to entrust others to help themselves respond to events, as follows

<DivID= "Father"style= "Background:green;">I'm a father.</BR>Oh Ah</BR>         <DivID= "Son"style= "Background:blue;">I'm a son.</Div>     </Div>

function (event) {            = Event | | window.event;             var target = Event.srcelement | | event.target;             if (Target.getattribute (' id ') = = = = ' son ') {alert (' You clicked on the son! ');}        }

Click "I am the Son" pop-up box, click "I am the father ah" nothing to play, of course, you can not only delegate the parent element, you can also delegate and your unrelated elements

" event bubbling " and " event propagation ":

Two said together, there are historical reasons, the early two friends, Netscape and Microsoft, it is all on the dry, Netscape "event spread", Microsoft to Do "event bubbling", the two goods have what difference, the online someone has specially drawn a picture

"Event bubbling" is the green Arrow, and "Event propagation" is the red arrow.

"Event bubbling" from the target element "TD" has been to the root "window", "event propagation" from the root "window" has been passed to the "TD" element, is not programming is the opposite of dry, really enemy

At this time the United Nations "world" to come, this does not ah, can not be confused by their Ah, otherwise this world is not disorderly, but these two guys strength is relatively strong, but also can not think of them ah, so the world of the adoption and plan to set standards, " any event first down to meet the target element, And then bubble up back ", this is good attention to this problem is unified, and all take care of everyone, I this Secretary-general position stability!!!

So, you see above two functions "attachevent" and "AddEventListener", where "attachevent" is IE8 and its previous Internet Explorer dedicated, only support "event bubbling", "AddEventListener" is all supported

The browser of the standard event model is dedicated to support event bubbling and event propagation. The corresponding cancellation event binding is the "detachevent" and "RemoveEventListener" two functions. That "event = Event | | Window.event "is also compatible with browsers because IE8 and its previous IE browsers cannot get the event object directly and need to be fetched from the Window object.

What is the difference between this "event propagation" and "event bubbling", and we still use a piece of code to prove it (because IE8 and previous browsers only support "event bubbling", so we test it here in Chrome)

First HTML code

<div id= "Father" style= "Background:green;" >         I am a father </br>         hehe </br>         <div id= "son" style= "background:blue;" >             I'm a son        . </div>     </div>

Interface is

function () {            alert (' I am the father! ');         true); // Capturing during the event propagation phase        function (event) {            alert (' I am a son! ');         true); // capturing during the event propagation phase

Click "I am Son" is not going to pop two times, and then we replace the following this paragraph to see the pop up a few times

function () {            alert (' I am the father! ');            Event.stoppropagation ();         true );        document.getElementById (event) {            alert (' I am a son! ');         true);

This time only popped up once "I am the father", "I am the son" the sentence did not carry out, this is what reason?

Because this setting captures events during the event propagation phase, the event is propagated to the ' father ' element first, and the ' event.stoppropagation () ' block event is called in the ' father ' element, so the event is no longer propagated to the ' son ' element ( Note that a lot of kinky confuse the blocking event propagation or bubbling with the block default event, the function that blocks the default event is ' Preventdefault ' and ' returnvalue = false; ', a standard browser dedicated, a IE8 and previous version of IE dedicated )

Then look at the event bubbling phase to capture, what will be the result, the code is as follows

function () {            alert (' I am the father! ');         false );        document.getElementById (event) {            alert (' I am a son! ');         Event.stoppropagation ();         false);    

This time again click "I am son ah" only pops up "I am the son", "I am the father" did not eject, this is what reason?

Because the code above sets the event to be captured during the bubbling phase, the event propagates to ' Fanther ' in the propagation phase, ' son ' then arrives at the target element ' son ', and then returns with event bubbling in accordance with the rules, first reaching ' son ', but is blocked in ' son ', So no more bubbling up, just capturing the ' son ' event.

" Event Capture ": Look at the above so much, I think this does not have to explain it

"Event Model ": This, the author seems to explain on the above, needless to say

My humble Caishuxueqian, there are shortcomings, welcome to fill!!!

JavaScript event propagation and event bubbling, event model