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 Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
vue的mixins属性详解
Mar 14 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
JavaScript常用基础知识强化学习
2015/12/09 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Django视图扩展类知识点详解
2019/10/25 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
python遍历路径破解表单的示例
2020/11/21 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
客服文员岗位职责
2013/11/29 职场文书
绩效工资分配方案
2014/01/18 职场文书
师恩难忘教学反思
2014/04/27 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
营业员岗位职责
2015/02/11 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Python echarts实现数据可视化实例详解
2022/03/03 Python