JS event bubbling and event capture

They are terms that describe event-triggering timing issues. Event capture refers to the node from document to the triggering event, which is the top-down trigger event. On the contrary, event bubbling is the bottom-up trigger event. The third parameter of a bound event method is to control whether the event firing order is an event capture. True, event capture; false, event bubbling. The default is False, which is event bubbling. The e.stoppropagation of jquery will stop bubbling, meaning that the events of my father and ancestors will not be triggered until I get there.

This is the HTML structure

123	<divid="parent">　　<divid="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.

Using Event bubbling implementation:

$ ("ul"). On ("MouseOver", function (e) {                $ (e.target). 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!

JS event bubbling and event capture