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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
vuex actions传递多参数的处理方法
Sep 18 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
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
将数组写入txt文件 var_export
2009/04/21 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
php 定义404页面的实现代码
2012/11/19 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
初探nodeJS
2017/01/24 NodeJs
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
如何通过python计算圆周率PI
2020/11/11 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
优秀老师事迹材料
2014/02/05 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
白血病募捐倡议书
2014/05/14 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
获奖感言怎么写
2015/07/31 职场文书
预备党员入党感言
2015/08/01 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python