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代码
Mar 16 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
红米手机抢购的js代码
Mar 10 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
node实现登录图片验证码的示例代码
Apr 20 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python利用IPython提高开发效率
2016/08/10 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
通过代码实例了解Python异常本质
2020/09/16 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
黄河象教学反思
2014/02/10 职场文书
人力资源主管职责范本
2014/03/05 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
消防工作实施方案
2014/06/09 职场文书
技术经济专业求职信
2014/09/03 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python