深入理解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 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
vue axios整合使用全攻略
May 24 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
JS实现多功能计算器
Oct 28 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开发文件系统实例讲解
2006/10/09 PHP
PHP5+UTF8多文件上传类
2008/10/17 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
jQuery代码优化 选择符篇
2011/11/01 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
ExpressJS入门实例
2015/01/14 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python计算文本文件行数的方法
2015/07/06 Python
python中的计时器timeit的使用方法
2017/10/20 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
python多进程实现文件下载传输功能
2018/07/28 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python滑块验证码的破解实现
2019/11/10 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
市级优秀班主任事迹材料
2014/05/13 职场文书
世界名著读书笔记
2015/06/25 职场文书