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 相关文章推荐
JQuery的一些小应用收集
Mar 27 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
javascript不可用的问题探究
Oct 01 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 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
php扩展ZF――Validate扩展
2008/01/10 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
javascript基础知识讲解
2017/01/11 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
印尼购物网站:iLOTTE
2019/10/16 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
教师对学生的评语
2014/04/28 职场文书
师范生见习报告
2014/10/31 职场文书
2014年保育员工作总结
2014/12/02 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
React四级菜单的实现
2022/04/08 Javascript