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()

 

　　

posted @ 2017-01-31 21:47  初见清宵  阅读(207)  评论(0)  编辑  收藏  举报