Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to capture and bubble Javascript events. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

I. event handling model

Event bubbling, capture: event bubbling and event capture are proposed by Microsoft and Netscape respectively, both of which are designed to solve the problem of event flow (event sequence) on the page.

What is the firing order of the three div given with nested relationships when registering the same events for the three elements?

1. Event bubbling

Microsoft proposed an event stream called event bubbling. Structurally (non-visually) nested elements have the function of bubbling, that is, the same event, bubbling from the child element to the parent element. (bottom up)

For the above example, if the bubbling method is used and the trigger sequence should be: d3muri-> d2murf-> D1, let's verify it:

(1) bind event / / 1 to three div elements. Get the element var D1 = document.querySelector ('# d1') var D2 = document.querySelector ('# d2') var D3 = document.querySelector ('# d3') / / 2, binding event d1.onclick = function () {console.log (this.id)} d2.onclick = function () {console.log (this.id)} d3.onclick = function () {console.log (this.id)} (2) run:

Click the red area:

Click the purple area:

Click the green area:

The above is the event bubbling!

2. Event capture

Structurally (non-visually) nested elements have the ability to capture events, that is, the same event, captured from the parent element to the child element (event source element). (top-down) (ie did not capture events)

For the above example, if the bubbling method is used, the trigger sequence should be: D1 color-> d 2 color-> d 3, so let's verify it:

(1) bind event / / 1 to three div elements. Get the element var D1 = document.querySelector ('# d1') var D2 = document.querySelector ('# d2') var D3 = document.querySelector ('# d3') / / 2, binding event d1.onclick = function () {console.log (this.id)} d2.onclick = function () {console.log (this.id)} d3.onclick = function () {console.log (this.id)} (2) run:

Click the red area:

Click the purple area:

Click the green area:

Event capture getcapture calendar!

Note:

Trigger sequence: capture first, then bubble

Events such as focus,blur,change,submit,reset,select do not bubble.

Second, prevent event bubbling (1) W3C standard event.stopPropagation (); but the following versions of ie9 do not support / / 1. Get the element var D1 = document.querySelector ('# d1') var D2 = document.querySelector ('# d2') var D3 = document.querySelector ('# d3') / / 2, binding event d1.onclick = function () {console.log (this.id)} d2.onclick = function () {console.log (this.id)} d3.onclick = function (e) {e.stopPropagation (); console.log (this.id)}

You will find that when you click the green area, no external events are triggered in turn, and the event bubbling is prevented:

(2) ie is unique: event.cancelBubble = true;//1. Get the element var D1 = document.querySelector ('# d1') var D2 = document.querySelector ('# d2') var D3 = document.querySelector ('# d3') / / 2, binding event d1.onclick = function () {console.log (this.id)} d2.onclick = function () {console.log (this.id)} d3.onclick = function (e) {e.cancelBubble = true; console.log (this.id)}

The results are the same as (1).

(3) merge and cancel: return false

Return false in javascript only blocks the default behavior, while using jQuery prevents both default behavior and object bubbling.

This is the end of this article on "how to capture and bubble Javascript events". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.