JavaScript事件冒泡与事件捕获实例分析


Posted in Javascript onAugust 01, 2018

本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考,具体如下:

1、事件冒泡

在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件。

<body onclick="alert('body')">
  <div onclick="alert('div')">
    <a href="" onclick=" rel="external nofollow" alert('a')">事件冒泡</a>
  </div>
</body>

依次输出:a、div、body

注意:不是所有的事件都能冒泡。blurfocusloadunload等事件不冒泡。

2、阻止事件冒泡

若只希望事件发生在该子元素而不是在它的祖先元素上,则需要阻止事件冒泡。

IE浏览器和其他浏览器阻止事件冒泡的方式不同:

function stopBubble(e){
  if(e && e.stopPropagation)
    e.stopPropagation(); // 非IE浏览器
  else
    window.event.cancelBubble = true; // IE浏览器
}
<div>
  <a href="">事件冒泡</a>
</div>
<script>
  function stopBubble(e){
    if(e && e.stopPropagation)
      e.stopPropagation(); // 非IE浏览器
    else
      window.event.cancelBubble = true; // IE浏览器
  }
  document.getElementsByTagName("body")[0].onclick = function(e) {
    stopBubble(e);
    alert('body');
  }
  document.getElementsByTagName("div")[0].onclick = function(e) {
    stopBubble(e);
    alert('div');
  }
  document.getElementsByTagName("a")[0].onclick = function(e) {
    stopBubble(e);
    alert('a');
  }
</script>

输出:a

3、事件冒泡与事件捕获

事件捕获:事件从document开始往下查找,直到捕获到事件目标(target)。

事件冒泡:事件从事件目标(target)开始,往上冒泡直到document为止。

传统的element.onclick = doSomething这样的事件绑定,一般采用的是事件冒泡形式。

<div>
  <p>传统的事件冒泡</p>
</div>
<script>
  document.getElementsByTagName("p")[0].onclick = function(e) {
    alert('p');
  };
  document.getElementsByTagName("div")[0].onclick = function(e) {
    alert('div');
  };
</script>

依次输出:p、div

其实,可以选择绑定事件时采用事件捕获还是事件冒泡,方法是绑定事件时通过addEventListener函数,它有3个参数,第3个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡,如element.addEventListener('click', doSomething, true)

<div>
  <p>设置的事件冒泡</p>
</div>
<script>
  document.getElementsByTagName("p")[0].addEventListener('click', function(e) {
    alert('p');
  }, false);
  document.getElementsByTagName("div")[0].addEventListener('click', function(e) {
    alert('div');
  }, false);
</script>

依次输出:p、div

<div>
  <p>设置的事件捕获</p>
</div>
<script>
  document.getElementsByTagName("p")[0].addEventListener('click', function(e) {
    alert('p');
  }, true);
  document.getElementsByTagName("div")[0].addEventListener('click', function(e) {
    alert('div');
  }, true);
</script>

依次输出:div、p

注意:Chrome和Firefox都支持事件捕获和事件冒泡,但IE只支持事件冒泡,不支持事件捕获,也不支持addEventListener函数,提供了另一个函数attachEvent,如ele.attachEvent("onclick", doSomething)

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
3种vue组件的书写形式
Nov 29 Javascript
Mac下安装vue
Apr 11 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 #Javascript
create-react-app 修改为多入口编译的方法
Aug 01 #Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 #Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 #Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 #Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 #Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 #Javascript
You might like
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
简单了解Python write writelines区别
2020/02/27 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Django返回HTML文件的实现方法
2020/09/17 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
保安公司服务承诺书
2014/05/28 职场文书
会计专业求职信
2014/08/10 职场文书
写给医院的感谢信
2015/01/22 职场文书
综合素质评价自我评价
2015/03/06 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
解析redis hash应用场景和常用命令
2021/08/04 Redis
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js