理解jquery事件冒泡
一、什么是jquery事件冒泡
在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡。
代码实例如下:
<html> <head> <metacharset="gb2312"> <title>事件冒泡</title> <scripttype="text/javascript"src="mytest/jQuery/jquery-1.8.3.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ $("#second").click(function(){ alert("我是second"); }) $("#first").click(function(){ alert("我是first"); }) }) </script> </head> <body> <pid="first"><aid="second"href="http://www.baidu.com">点击查看效果</a></p> </body> </html>
在以上代码中,我们可能只想点击锚点后弹出“我是third”,但是令人奇怪的事情却是所有父元素定义的click事件都会被触发。这就是一个典型的事件冒泡效果。所谓的冒泡事件就是,如果在某一个对象上触发某一类事件(如上例的click事件),那么此事件会向对象的父级对象传播,并触发父对象上定义的同类事件。事件传播的方向是从最底层到最顶层,类似于水泡从水底浮上来一般。
二、javascript如何阻止事件冒泡
冒泡事件能够带来便利,有时候也会带来麻烦,下面就简单介绍一下如何阻止事件冒泡。
代码实例如下:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <head> <title>事件冒泡</title> <styletype="text/css"> #grandfather{ border:1pxsolid#0066FF; cellpadding:0px; cellspacing:0px; } #grandfathertd{ border:1pxsolid#0066FF; } </style> <scripttype="text/javascript"> functiontrclick(){ alert("父亲的onclick事件触发"); } functiontableclick(){ alert("祖父的onclick事件触发"); } window.onload=function(){ vargrandfather=document.getElementById("grandfather"); varfather=document.getElementById("father"); varnoStop=document.getElementById("noStop"); varhaveStop=document.getElementById("haveStop"); grandfather.onclick=tableclick; father.onclick=trclick; noStop.onclick=function(){ alert("没有阻止冒泡的子元素"); } haveStop.onclick=function(evt){ alert("阻止冒泡的子元素"); if(window.event){ event.cancelBubble=true; } elseif(evt){ evt.stopPropagation(); } } } </script> </head> <body> <tablewidth="204"id="grandfather"> <tr> <tdwidth="96"></td> <tdwidth="96"></td> </tr> <trid="father"> <tdid="noStop">没有阻止事件冒泡</td> <tdid="haveStop">阻止了事件冒泡</td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
代码注释:
1.if(window.event)这个用来兼容IE8和IE8一下浏览器。
2.evt.stopPropagation()这个是标准浏览器。
以上代码中,一个单元格阻止了事件冒泡,一个没有阻止事件冒泡,希望对大家的学习有所帮助。