JQuery事件冒泡
1. 什么叫事件冒泡?
Jquery中的事件会按照DOM的层次结构像水泡一样不断向上直至顶端
《锋利的Jquery》中给出的例子如下:
1 <!DOCTYPE html> 2 <head></head> 3 <body> 4 <div id="content"> 5 outer div element 6 <span>inner div elements</span> 7 outer div elements 8 </div> 9 <div id="msg"></div> 10 <script type="text/javascript"> 11 $(function(){ 12 $('span').bind("click",function(){ 13 var txt = $('#msg').html()+"<p>inner span element clicked.</p>"; 14 $('#msg').html(txt); 15 }); 16 $('#content').bind("click", function(){ 17 var txt = $('#msg').html()+"<p>outer div element clicked.</p>"; 18 $('#msg').html(txt); 19 }); 20 }); 21 </script> 22 </body>
如上例,单击span元素会同时出发span.click 和 #content.click 两个事件
2. 引发的问题:
本来只想触发span的click事件,却同时出发了div和body的点击事件。所以,有必要对触发事件的对象做以限定。
2.1 事件对象:
绑定的事件时像function中传入event对象,使当点击某元素时,事件被创建,然后函数执行完毕后,事件对象被销毁,代码如下:
1 $("element").bind("click",function(event){ 2 /// 3 });
2.2 停止事件冒泡:
stopPropagation()
2.3 阻止默认行为:
preventDefault()