The most detailed JavaScript event User Guide in history (1)

The most detailed JavaScript event User Guide in history (1)

 

Event stream

Event streams describe the sequence of events received from the page. IE and Netscape propose an almost identical concept of event streams. IE event streams are event bubbles streams, the Netscape event stream is the event capture stream.

Event bubbling

The event stream of IE is called event bubbling, that is, the event is received by the most specific element (the node with the deepest nesting in the document) at the beginning, and then goes up to the document step by step. The following code:

<P id = "p"> <span id = "span"> <a id = "aTag"> event test </a> </span> </p>

JS:

Document. getElementById ("aTag "). addEventListener ('click', aTag); document. getElementById ("span "). addEventListener ('click', span); document. getElementById ("p "). addEventListener ('click', p); function aTag (e) {alert ("click a tag");} function span (e) {alert ("span tag clicked");} function p (e) {alert ("p tag clicked ");}

After you click the "event test" text, the click event will be transmitted in the following order;

1) print it first: Click the tag.

2) print again: Click the span tag.

3) Finally, click the p tag.

4) It must be the document.

All modern browsers support event bubbling.

Event Capture:

Event capture is in the opposite order of event streams. The event streams captured by the event are transmitted in the outermost layer step by step, that is, first document, then p tag, span tag, and a tag;

The above JS Code is changed to the following:

document.getElementById("p").addEventListener('click',p,true);document.getElementById("aTag").addEventListener('click',aTag,true);document.getElementById("span").addEventListener('click',span,true);

The third parameter is set to true, that is, capture events. The default value is false. Otherwise, the event stream is the same as the above, because whether in IE or standard browser, event bubbles are supported by browsers.