Event bubbling in Javascript

This is a basic article. It uses JavaScript to observe the event bubbling mechanism in the Dom and describes how to block default behavior and how to organize event bubbling.

1. The first example can be run in Firefox.

<Div id = "container1" onclick = "alert ('click container1');">
<Div id = "container2" onclick = "alert ('click container2');">
<A href = "http://www.google.com" target = "_ blank" onclick = "fn1 (event);"> Google </a>
<A href = "http://www.google.com" target = "_ blank" onclick = "FN2 (event);"> Google </a>
<A href = "http://www.google.com" target = "_ blank" onclick = "fn3 (event);"> Google </a>
<A href = "http://www.google.com" target = "_ blank" onclick = "FN4 (event);"> Google </a>
</Div>
</Div>

 

Function fn1 (event ){
Alert ('click Google ');
}

Function FN2 (event ){
Alert ('click Google ');
Event. preventdefault ();
}

Function fn3 (event ){
Alert ('click Google ');
Event. stoppropagation ();
}

Function FN4 (event ){
Alert ('click Google ');
Event. preventdefault ();
Event. stoppropagation ();
}

 

Click the first link, alert_google-> alert_container2-> alert_container1-> open_google_page

Click the second link, alert_google-> alert_container2-> alert_container1

Click the third link, alert_google-> open_google_page

Click the fourth link, alert_google

 

We can see that event bubbling starts from the HTML node where the event was initially triggered, and raises the same event of the parent node step by step.

In Firefox, we can use the preventdefault function to block default behaviors (for example, in this example, the default behavior of clicking a link is to open the link address)

Use the stoppropagation function to prevent event bubbles.

 

The implementation of the same process in IE is somewhat different. First, the event in IE is an attribute of the window object,

The second is to block the default behavior of the event or to prevent the event from bubbling. For details, see:

2. Observe the event bubbles in IE.

 

<Div id = "containerpolicie" onclick = "alert ('click container1');">
<Div id = "container2_ie" onclick = "alert ('click ininer2');">
<A href = "http://www.google.com" target = "_ blank" onclick = "fn1_ie ();"> Google </a> <
Href = "http://www.google.com" target = "_ blank" onclick = "fn2_ie ();"> Google </a>
<A href = "http://www.google.com" target = "_ blank" onclick = "fn3_ie ();"> Google </a> <
Href = "http://www.google.com" target = "_ blank" onclick = "fn4_ie ();"> Google </a>
</Div>
</Div>

 

Function fn1_ie (){
Alert ('click Google ');
}

Function fn2_ie (){
Alert ('click Google ');
Event. returnvalue = false;
}

Function fn3_ie (){
Alert ('click Google ');
Event. cancelbubble = true;
}

Function fn4_ie (){
Alert ('click Google ');
Event. returnvalue = false;
Event. cancelbubble = true;
}

 

Similarly:

Click the first link, alert_google-> alert_container2-> alert_container1-> open_google_page

Click the second link, alert_google-> alert_container2-> alert_container1

Click the third link, alert_google-> open_google_page

Click the fourth link, alert_google

 

Code download