深入理解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 相关文章推荐
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
js控制frameSet示例
Sep 10 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
微信小程序基础教程之echart的使用
Jun 01 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+ajax实时刷新简单实例
2015/02/25 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
Python pass详细介绍及实例代码
2016/11/24 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python中正则表达式与模式匹配
2019/05/07 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
老干部工作汇报材料
2014/10/28 职场文书
家长高考寄语
2015/02/27 职场文书
民事申诉状范本
2015/05/20 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python