How to implement JavaScript event bubbling and event capturing-JS Tutorial-php.cn

How to implement JavaScript event bubbling and event capturing

php中世界最好的语言

Release： 2018-03-19 14:29:26

Original

2249 people have browsed it

This time I will bring you JavaSriptEventHow to implement bubbling and event capture, what are the notes for implementing JavaSript event bubbling and event capture, the following is a practical case, Let’s take a look.

Event flow describes the order in which events are received from the page. But at that time, when browsers developed to the fourth generation (IE4 and Netscape Communicator4), the IE and Netscape development teams each proposed the concept of event flow, and the concepts of the two sequential flows were almost opposite. As follows:

1. Event bubbling: This is the event flow of IE. Event bubbling means: when the event starts, the most specific element is received (the most specific refers to the deepest nested element in the document ), and then upload to unspecific nodes (documents) step by step.

2. Event capture: This is the event stream proposed by Netscape. As mentioned before, the two orders are almost opposite, so the event capture order is received by the least specific node (document), step by step passed to the deepest element.

Let’s see an example:

<head>

# < title>Event Bubbling Example
##

##
Click Me

If you click the
element above:

For event bubbling: the order of propagation of this click event is: p ----> body -- --> html ----> document

For event capture: the order of propagation of this click event is: document --- -> html ----> body ----> p

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Other related articles on the Chinese website!

Recommended reading:

Css float box model position

Basic knowledge of html in the front end
The above is the detailed content of How to implement JavaScript event bubbling and event capturing. For more information, please follow other related articles on the PHP Chinese website!