Detailed explanation of DOM event flow_basic knowledge-JS Tutorial-php.cn

1. Bubbling events

Browser event models are divided into two types: capturing events and bubbling events. Since IE does not support capturing events, the following mainly uses bubbling events as an explanation.
(Dubbed bubbling) Bubbling means that events are triggered one by one from the most specific event to the least specific event.

Copy code The code is as follows:

')"> click me

The above three functions all add the onclick function. All three functions are triggered after the single p element. The p element is executed first, then the div, and finally the body

By the way, here is a reminder of capturing events, whose order is exactly the opposite of bubbling events.

2. Event monitoring

An event requires a function to respond. This type of function is usually called an event handler. From another perspective, these functions are monitoring whether an event occurs in real time. They are usually called event listening functions ( enevt listener), the event listening function varies greatly between different browsers.

i. Universal listening methods, such as using the onclick method, almost every tag supports this method. And the browser compatibility is very high

Accounting for behavior, event separation.
Generally, the following methods are used for monitoring

Copy code The code is as follows:

click

The two methods introduced above are very convenient and are loved by Everbright developers when making and processing some small functions. But for the same event. They can only add one function, such as the onclick function of the p mark. Both methods can only have one function. Therefore, IE has its own solution. At the same time, the standard DOM provides another method. .

ii.Listening method in IE

In early IE browsers, each element has two methods to handle time monitoring.
They are attachEvent() and detachEnevt() respectively.
As can be seen from their function names, attachEnevt() is a function used to add event processing to an element, while detachEvent() is used to delete the listening function on the element. Their syntax is as follows:

[object].attachEvent("enevt_handler","fnHandler");

[object].detachEvent("enevt_handler","fnHandler");
Among them, enevt_handler represents commonly used onclick, onload, onmouseover, etc.
fnHandler is the name of the listening function.
In the event in the previous section, you can use the attachEvent() method instead of adding a listening function. When you click once, you can use detachEvent() to delete the listening function so that it will not be executed after the next click.

Copy code The code is as follows:

3. Standard DOM event monitoring

Compared with the two methods of ie, the standard DOM also uses two methods to add and delete listening functions respectively. That is addEventListener(), and removeEventListener()

Unlike ie, these two functions accept 3 parameters, namely the name of the event, the function name to be assigned and whether it is used in the bubbling phase or the capturing phase. The parameters in the capture phase are true, and the parameters in the bubbling phase are false. The syntax is as follows:

Copy code

The code is as follows: [object].addEventListener("event_name",fnHandler,bCapture); [object].removeEventListener("event_name",fnHandler,bCapture);

The usage of these two functions is basically similar to that in Ie, but please note that the names of event_name are "click", "mouseover", etc., instead of "onclick", "onmouseover" in Ie. 

In addition, the third parameter bCapture is usually set to false, bubbling stage.

Standard DOM event listening method:

Copy code

The code is as follows: