JQuery事件冒泡

最新推荐文章于 2024-08-22 14:32:34 发布

aomi5066

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量54

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ClaireLiu/p/6359107.html

版权

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

转载于:https://www.cnblogs.com/ClaireLiu/p/6359107.html

aomi5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery事件冒泡

1. 什么叫事件冒泡？　　Jquery中的事件会按照DOM的层次结构像水泡一样不断向上直至顶端　　《锋利的Jquery》中给出的例子如下： 1 <!DOCTYPE html> 2 <head></head> 3 <body> 4 <div id="content"> 5 o...
复制链接

扫一扫