js 事件冒泡
转载:http://lengend.iteye.com/blog/1013372
事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形 式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事件是从哪个元素开始 的。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)</title> <meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" /> <script type="text/javascript"> function doSomething(obj, evt) { alert(obj.id); var e = (evt) ? evt : window.event; //判断浏览器的类型,在基于ie内核的浏览器中的使用cancelBubble if (window.event) { e.cancelBubble = true; } else { //e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation e.stopPropagation(); } } </script> </head> <body> <div id="parent1" onclick="alert(this.id)" style="width: 250px; background-color: yellow"> <p>This is parent1 div.</p> <div id="child1" onclick="alert(this.id)" style="width: 200px; background-color: orange"> <p>This is child1.</p> </div> <p>This is parent1 div.</p> </div> <br /> <div id="parent2" onclick="alert(this.id)" style="width: 250px; background-color: cyan;"> <p>This is parent2 div.</p> <div id="child2" onclick="doSomething(this,event);" style="width: 200px; background-color: lightblue;"> <p>This is child2. Will bubble.</p> </div> <p>This is parent2 div.</p> </div> </body> </html>
jquery中通过event.target定位目标元素(即被触发事件的元素)
<!DOCTYPE html> <html> <head> <script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script> $(document).ready(function(){ function handler(event) { var $target = $(event.target); if( $target.is("li") ) { $target.children().toggle(); } } $("ul").click(handler).find("ul").hide();//从这里也看出find只在后代中遍历,不包括自己。 }); </script> </head> <body> <ul> <li>item 1 <ul> <li>sub item 1-a</li> <li>sub item 1-b</li> </ul> </li> <li>item 2 <ul> <li>sub item 2-a</li> <li>sub item 2-b</li> </ul> </li> </ul> </body> </html>
jquery中停止冒泡
<script type="text/javascript"> $(function(){ $("li").live("click",function(event){ $("#temp").html("clicked: " + event.target.nodeName); $(this).css("color","#FF3300"); event.stopPropagation();//停止冒泡 }) }); </script>