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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
asp 的 分词实现代码
May 24 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
js仿微信抢红包功能
Sep 25 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 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
Laravel5中contracts详解
2015/03/02 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
设定php简写功能的方法
2019/11/28 PHP
Javascript开发包大全整理
2006/12/22 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
javascript 实现map集合
2015/04/03 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
python3简单实现微信爬虫
2015/04/09 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android