JQuery中DOM事件冒泡实例分析


Posted in Javascript onJune 13, 2015

本文实例分析了JQuery中DOM事件冒泡。分享给大家供大家参考。具体分析如下:

什么是冒泡

在页面上可以有多个事件,也可以多个元素响应同一个事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件。

<div id="content">
  外层div元素
  <span>内层span元素</span>
  外层div元素
</div>
<script type="text/javascript">
$(function(){
  // 为span元素绑定click事件
  $('span').bind("click",function(){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(){
   var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>

当单击内部span元素,即触发span元素的click事件时,会输出3条记录。只单击内部span元素,就会触发外部div元素和body元素上绑定的click事件。这是由事件冒泡引起的。在单击span元素的同时,也单击了包含span元素的元素div和包含div元素的元素body,并且每一个元素都会按照特定的顺序响应click事件。

元素的click事件会按照以下顺序“冒泡”。

1. <span>
2. <div>
3. <body>

之所以称为冒泡,是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

事件冒泡引发的问题

事件冒泡可能会引起预料之外的效果。上例中,本来只想触发<span>元素的click事件,然而<div>元素和<body>元素的click事件也同时被触发了。因此,有必要对事件的作用范围进行限制。当单击<span>元素时,只触发<span>元素的click事件,而不触发<div>元素和<body>元素的click事件:当单击<div>元素时,只触发<div>元素的click事件,而不触发<body>元素的click事件。

事件对象

由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同浏览器中获取事件对象变得比较困难。针对这个问题,JQuery进行了必要的扩展和封装,从而使得在任何浏览器中都能很轻松地获取事件对象以及事件对象的一些属性。

在程序中使用事件对象非常简单,只需要为函数添加一个参数,jQuery代码如下:

$("element").bind("click",function(event){ 
  //event : 事件对象 
  //... 
});

这样,当单击“element”元素时,事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。

停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在JQuery中提供了stopPropagation()方法来停止事件冒泡。

$(function(){
   // 为span元素绑定click事件
  $('span').bind("click",function(event){
    var txt = $('#msg').html() + "内层span元素被点击";
    $('#msg').html(txt);
    event.stopPropagation(); // 阻止事件冒泡
  });
})

当单击<span>元素时,只会触发<span>元素上的click事件,而不会触发<div>元素和<body>元素的click事件。可以用同样的方法解决<div>元素上的冒泡问题。

$('#content').bind("click",function(event){ 
 var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; 
 $('#msg').html(txt); 
 event.stopPropagation(); // 阻止事件冒泡 
});

这样,当单击<span>元素或者<div>元素时,就只会输出相应的内容,而不会输出其他的内容。

阻止默认行为

网页中的元素有自己默认的行为,例如,单击超链接后会跳转、单击“提交”按钮后表单会提交,有时需要阻止元素的默认行为。

在JQuery中,提供了preventDefault()方法来阻止元素的默认行为。

举一个例子,在项目中,经常需要验证表单,在单击“提交”按钮时,验证表单内容,例如某元素是否是必填字段,某元素长度是否够6位等,当表单不符合提交条件时,要阻止表单的提交(默认行为)。

<form action="test.html">
用户名:<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>
$(function(){
 $("#sub").bind("click",function(event){
   var username = $("#username").val(); //获取元素的值
   if(username==""){ //判断值是否为空
      $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
      event.preventDefault(); //阻止默认行为 ( 表单提交 )
     }
 })
})

当用户名为空时,单击“提交”按钮,会出现提示,并且表单不能提交。只有在用户名里输入内容后,才能提交表单。可见,preventDefault()方法能阻止表单的提交行为。

如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返同false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。

在表单的例子中,可以把 event.preventDefault(); 改写为: return false;

也可以把事件冒泡例子中的 event.stopPropaqation(); 改写为: return false;

事件捕获

事件捕获和事件冒泡是刚好相反的两个过程,事件捕获是从最顶端往下开始触发。还是冒泡事件的例子,其中元素的click事件会按照以下顺序捕获。

1. <body>
2. <div>
3. <span>

很显然,事件捕获是从最外层元素开始,然后再到最里层元素。因此绑定的click事件,首先会传递给<body>元素,然后传递给<div>元素,最后才传递给<span>元素。

遗憾的是,并非所有主流浏览器都支持事件捕获,并且这个缺陷无法通过JavaScript来修复。JQuery不交持事件捕获,如果读者需要使用事件捕获,请直接使用原生的JavaScript。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 #Javascript
JQuery中DOM事件绑定用法详解
Jun 13 #Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 #Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 #Javascript
JavaScript中的Math.E属性使用详解
Jun 12 #Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 #Javascript
JavaScript中的parse()方法使用简介
Jun 12 #Javascript
You might like
极典R601SW收音机
2021/03/02 无线电
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
python实现的防DDoS脚本
2011/02/08 Python
python实现数据图表
2017/07/29 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
python flask中动态URL规则详解
2019/11/22 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
家访教师心得体会
2016/01/23 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
Oracle用户管理及赋权
2022/04/24 Oracle