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 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
Javascript 构造函数 实例分析
Nov 26 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
javascript+css实现进度条效果
Mar 25 Javascript
微信小程序选择图片控件
Jan 19 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP编写RESTful接口
2016/02/23 PHP
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
Javascript函数的参数
2015/07/16 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python中decorator使用实例
2015/04/14 Python
Python探索之自定义实现线程池
2017/10/27 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
python excel多行合并的方法
2020/12/09 Python
python实现双人五子棋(终端版)
2020/12/30 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL