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 相关文章推荐
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
js自定义回调函数
Dec 13 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
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
图形数字验证代码
2006/10/09 PHP
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
webpack打包js的方法
2018/03/12 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
Python中Class类用法实例分析
2015/11/12 Python
详解python3百度指数抓取实例
2016/12/12 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
c++工程师面试问题
2013/08/04 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
Delphi笔试题
2016/11/14 面试题
2015年初一班主任工作总结
2015/05/13 职场文书
信用卡催款律师函
2015/05/27 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书