深入理解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 相关文章推荐
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
js实现延迟加载的方法
Jun 24 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 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
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
Python生成器以及应用实例解析
2018/02/08 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
python实现静态服务器
2019/09/05 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
公积金单位接收函
2014/01/11 职场文书
个人优缺点自我评价
2014/01/27 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
干部考核评语
2014/04/29 职场文书
项目投资建议书
2014/05/16 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
营业员岗位职责
2015/02/11 职场文书
秋菊打官司观后感
2015/06/03 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
Hive导入csv文件示例
2022/06/25 数据库
OpenFeign实现远程调用
2022/08/14 Java/Android