The first conclusion: there are two ways of executing in the event execution flow. One is event bubbling (that is, the order in which events are executed is performed from bottom to top); The other is capture (that is, the order in which the events are executed is performed from the top down);
Block event bubbling: return false; Firefox/ie all support
function (even) {
var ev=even| | Window.even;
if (ev&&ev.stoppropagation) {
Ev.stoppropagation ();
}else{
Window.event.cancelbubble=true;
}
}
This is the HTML structure
123 |
< div id="parent"> < div id="child" class="child"></ div > </ div > |
Now let's bind them to events.
document.getElementById ("parent"). AddEventListener ("click", Function (e) { alert ("Parent event is triggered," +this.id); }) document.getElementById ("Child"). AddEventListener ("click", Function (e) { alert ("The child event is triggered," +this.id) })
Results:
The child event is triggered, the Childparent event is triggered, and the parent
Conclusion: Child first, then parent. Events are triggered in order from inside out, which is the event bubbling.
Now change the value of the third argument to True
document.getElementById ("parent"). AddEventListener ("click", Function (e) { alert ("Parent event is triggered," +e.target.id); } , true) document.getElementById ("Child"). AddEventListener ("click", Function (e) { alert ("The child event is triggered," + e.target.id) },true)
Results:
The parent event is triggered and the ParentChild event is triggered, child
Conclusion: Parent first, then child. The event firing order is changed to alien inward, which is the event capture.
It seems that there is no egg to use, the last case of using event bubbling, I often use it anyway.
<ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> </ul>
The demand is this: the mouse on the Li on the corresponding Li background dimmed.
Implement event delegate/event code using event bubbling principle:
The event agent resolves two issues:
1: Reduce traversal of descendant elements
2: Later dynamically generated descendant elements can also use bound events
$ ("ul"). On ("MouseOver", function (e) {//) Bind event $ (e.target) to the ancestor element of the target element. css ("Background-color", "#ddd"). Siblings (). CSS ("Background-color", "white"); })
Perhaps some people will say, we directly to all Li are tied to the event can ah, no trouble, as long as ...
$ ("Li"). On ("MouseOver", function () { $ (this). CSS ("Background-color", "#ddd"). Siblings (). CSS ("Background-color "," white "); })
Yes, that's OK. And from the simplicity of the code, the two are as similar as they seem. However, the former is less of an operation to traverse all LI nodes, so the performance is definitely better.
What's more, if we finish the binding event, the page dynamically loads some elements ...
$ ("<li>item7</li>"). AppendTo ("ul");
At this time, the second scenario, because the binding event when the ITEM7 does not exist, so in order to effect, we also have to bind it once again event. And the use of bubbling scheme due to the incident to UL bound ...
Stand up for the award!
Get a thorough understanding of JS event bubbling and event capture