深入理解jQuery中的事件冒泡


Posted in Javascript onMay 24, 2016

1.什么是冒泡

eg:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>事件冒泡</title>
  <script src="../../js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
    $(function () {
      //为span元素绑定click事件
      $('span').bind('click', function () {
        var txt = $('#msg').html() + '<p>内层span元素被点击</p>';
        $('#msg').html(txt);
        
      });
      //为span元素绑定click事件
      $('#content').bind('click', function () {
        var txt = $('#msg').html() + '<p>外层div元素被点击</p>';
        $('#msg').html(txt);
      });
      //为span元素绑定click事件
      $('body').bind('click', function () {
        var txt = $('#msg').html() + '<p>body元素被点击</p>';
        $('#msg').html(txt);
      });
    });
    
  </script>
</head>
<body>
  <div id="content">
    外层div元素
    <span>内层span元素</span>
  </div>
  <div id="msg"></div>
</body>
</html>

当你单击‘内层span元素'时,即触发<span>元素的click事件时,会输出3条记录

即:

内层span元素被点击

外层div元素被点击

body元素被点击

这就是事件冒泡引起的。

深入理解jQuery中的事件冒泡

 

2.事件冒泡引发的问题

01.事件对象

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

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

});

02.停止事件冒泡

在jQuery中提供了stopPropagation()方法来停止事件冒泡

以span元素绑定click事件为例:

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

当你单击‘内层span元素'时,即触发<span>元素的click事件时,这时只会输出1条记录

即:

内层span元素被点击

这样就解决了冒泡问题

03.阻止默认行为

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

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

eg:以输入提交为例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="../../js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#sub').bind('click', function (event) {
        var username = $('#username').val(); //获取元素的值
        if (username == "") {  //判断是否为空
          alert('文本框的值不能为空'); //提示信息
          event.preventDefault(); //阻止默认行为(表单提交)
        }
      });
    });
  </script>
</head>
<body>
  <form action="/">
    用户名:<input type="text" id="username" />
    <input type="submit" value="提交" id="sub" />
  </form>  
</body>
</html>

假如你不输入内容,这样就可以阻止默认行为(表单提交)

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

在上面表单的例子中,可以把

event.preventDefault();  //阻止默认行为(表单提交)

改写为:return false;

也可以把事件冒泡中的event.stopPropagation(); //停止事件冒泡

改写为:return false;

04.事件捕获

深入理解jQuery中的事件冒泡

05.事件对象的属性

 深入理解jQuery中的事件冒泡

事件对象的属性 详情请参考:http://www.w3school.com.cn/jsref/dom_obj_event.asp

以上这篇深入理解jQuery中的事件冒泡就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json的前台操作和后台操作实现代码
Jan 20 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
jQuery 弹出层插件(推荐)
May 24 #Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 #Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 #Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 #Javascript
JavaScript程序中的流程控制语句用法总结
May 23 #Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 #Javascript
谈一谈bootstrap响应式布局
May 23 #Javascript
You might like
如何开发一个虚拟域名系统
2006/10/09 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python使用matplotlib绘制热图
2018/11/07 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
django下创建多个app并设置urls方法
2020/08/02 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
大学生学习自我评价
2014/01/13 职场文书
关于学习的演讲稿
2014/05/10 职场文书
安全月宣传标语
2014/10/07 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
罚款通知怎么写
2015/04/22 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python