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 学习笔记 选择器之四
Jul 23 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
JavaScript判断浏览器版本的方法
Nov 03 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
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
python pandas移动窗口函数rolling的用法
2020/02/29 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
初中数学教学反思
2014/01/16 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
股东协议书范本
2014/04/14 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
学校宣传标语
2014/06/18 职场文书
电教室标语
2014/06/20 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
安全先进个人材料
2014/12/29 职场文书