js点击事件的执行过程实例分析【冒泡与捕获】


Posted in Javascript onApril 11, 2020

本文实例讲述了js点击事件的执行过程。分享给大家供大家参考,具体如下:

js事件对象event包括很多事件类型,这里用onclick事件为例,探讨一下在js事件捕获机制和冒泡机制下的执行过程,以及如何阻止事件的捕获和冒泡。

首先看下当我们点击一个元素后,浏览器的执行过程。

1,当某个元素绑定的事件被触发时,这时浏览器就会从顶级document元素发出一个事件流

2,这个事件流顺着dom层级,一层一层向下找,直到遇到了触发事件的目标元素,这个查找的过程是捕获阶段

  说明:捕获阶段,在查找每一层dom时,遇到相同的事件默认不执行,元素的事件默认在冒泡阶段执行

3,到达目标元素后会触发目标元素绑定的事件函数,也就是目标元素事件函数处理阶段

4,在处理过目标元素事件后,在顺着dom层级一层一层向上查找,这时对应dom上如果有相同的事件,默认会被触发,冒泡阶段

实例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
 <div class="box" style="width:300px;height:300px;background:green;" οnclick="firstClick()">
  parent
  <div class="child" οnclick="secondClick()">child
    <div class="button" onclick = "thirdClick()">提交</div>
  </div>
</div>
<script>
  var divs=document.querySelectorAll("div");//获取所有的divs
  function firstClick(){
    alert('firstClick')
  }
  function secondClick(){
    alert('secondClick')
  }
  function thirdClick(){
    alert('thirdClick')
  }
  function fn0(){
    alert("box");
  }
  function fn1(){
    alert("child");
  }
  function fn2(){
    alert("but");
  }
  divs[0].addEventListener("click",fn0,false);
  divs[1].addEventListener("click",fn1,false);
  divs[2].addEventListener("click",fn2,false);
</script>
</body>
</html>

说明:

addEventListener有三个参数,最后一个参数是决定元素事件的触发阶段,默认是false,在冒泡阶段执行,设置为true,则在捕获阶段执行。

在dom上直接绑定的事件会在addEventListenter监听的事件执行之后执行。

阻止冒泡:

onclick = function(e){
  e=e||window.event;
    if(e.stopPropagation){
    e.stopPropagation();//其它浏览器
  }else{
    e.cancelBubble=true;//IE浏览器
  }
}

阻止捕获:判断e.target

function fn0(e){
  if(e.target == divs[0]){
    alert("fn0");
  }
}
divs[0].addEventListener("click",fn0,true);

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
写一个Vue Popup组件
Feb 25 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
JavaScript运行机制实例分析
Apr 11 #Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 #Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 #Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 #Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 #Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 #Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 #Javascript
You might like
PHP安全防范技巧分享
2011/11/03 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHPMailer发送邮件
2016/12/28 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
JavaScript简介
2015/02/15 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
javascript自执行函数
2017/02/10 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
jQuery事件委托代码实践详解
2019/06/21 jQuery
原生JS实现天气预报
2020/06/16 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python 的类、继承和多态详解
2017/07/16 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
Python pip使用超时问题解决方案
2020/08/03 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
洗车工岗位职责
2014/03/15 职场文书
小学二年级评语
2014/04/21 职场文书
读书月活动方案
2014/05/22 职场文书
2015年人事科工作总结
2015/04/28 职场文书
工作感言一句话
2015/08/01 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js