Home > Article > Web Front-end > Understanding jquery event bubbling_jquery

Understanding jquery event bubbling_jquery

WBOYOriginal: 2016-05-16 15:22:071183browse

1. What is jquery event bubbling
Many textbooks or manuals may involve the concept of event bubbling. This is of course the most basic concept for veterans, but it is often unfamiliar to beginners or they have never heard of it. Let's briefly introduce what event bubbling is with code examples.
The code example is as follows:

<html>
<head>
<meta charset=" gb2312">
<title>事件冒泡</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#second").click(function(){
  alert("我是second");    
 })
 $("#first").click(function(){
  alert("我是first");    
 })
})
</script>
</head>
<body>
<p id="first"><a id="second" href="http://www.baidu.com">点击查看效果</a></p>
</body>
</html>

In the above code, we may just want to pop up "I am third" after clicking the anchor point, but the strange thing is that all click events defined by the parent element will be triggered. This is a typical event bubbling effect. The so-called bubbling event means that if a certain type of event is triggered on an object (such as the click event in the above example), then this event will propagate to the object's parent object and trigger similar events defined on the parent object. The direction of event propagation is from the bottom to the top, similar to water bubbles rising from the bottom of the water.
2. How to prevent events from bubbling with JavaScript
Bubbling events can bring convenience, but sometimes they can also cause trouble. Here is a brief introduction on how to prevent events from bubbling.
The code example is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>事件冒泡</title>
<style type="text/css">
#grandfather{
 border:1px solid #0066FF;
 cellpadding:0px;
 cellspacing:0px;
}
#grandfather td{
 border: 1px solid #0066FF;
}
</style>
<script type="text/javascript">
function trclick(){
 alert("父亲的onclick事件触发");
}
function tableclick(){
 alert("祖父的onclick事件触发");
}
window.onload=function(){
 var grandfather=document.getElementById("grandfather");
 var father=document.getElementById("father");
 var noStop=document.getElementById("noStop");
 var haveStop=document.getElementById("haveStop");
 
 grandfather.onclick=tableclick;
 father.onclick=trclick;
 
 noStop.onclick=function(){
 alert("没有阻止冒泡的子元素");
 }
 haveStop.onclick=function(evt){
 alert("阻止冒泡的子元素");
 if(window.event){
 event.cancelBubble=true;
 }
 else if(evt){
 evt.stopPropagation();
 }
 }
}
</script>
</head>
<body>
<table width="204" id="grandfather">
 <tr >
 <td width="96"></td>
 <td width="96"></td>
 </tr>
 <tr id="father">
 <td id="noStop">没有阻止事件冒泡</td>
 <td id="haveStop">阻止了事件冒泡</td>
 </tr>
 <tr>
 <td> </td>
 <td> </td>
 </tr>
</table>
</body>
</html>

Code comments:
1.if(window.event) is used to be compatible with IE8 and IE8 browsers.
2. evt.stopPropagation() is a standard browser.

In the above code, one cell prevents the event from bubbling, and the other does not prevent the event from bubbling. I hope it will be helpful to everyone's learning.

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：An in-depth analysis of modules in AngularJS_AngularJSNext article：An in-depth analysis of modules in AngularJS_AngularJS

See more

Understanding jquery event bubbling_jquery

Related articles