深入理解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 复制或插入Html的实现方法小结
May 19 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
js加减乘除精确运算方法实例代码
Jan 17 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学习 运算符与运算符优先级
2008/06/15 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php微信开发之上传临时素材
2016/06/24 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
javascript onmouseout 解决办法
2010/07/17 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
Python编程中的异常处理教程
2015/08/21 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
Python flask框架post接口调用示例
2019/07/03 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
python 读取二进制 显示图片案例
2020/04/24 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
预备党员承诺书
2014/03/25 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
公务员年度考核评语
2014/12/31 职场文书
《落花生》教学反思
2016/02/16 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
竞聘书的秘诀
2019/04/02 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
Redis基本数据类型Set常用操作命令
2022/06/01 Redis