search

Home >Web Front-end >JS Tutorial >How to implement JavaScript event bubbling and event capturing

How to implement JavaScript event bubbling and event capturing

php中世界最好的语言
php中世界最好的语言Original
2018-03-19 14:29:262334browse

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What you need to know to get started with PromiseNext article：What you need to know to get started with Promise

Related articles

See more

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved