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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
javascript定时器完整实例
Feb 10 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
js使用formData实现批量上传
Mar 27 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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使用者状态管理功能的应用
2006/10/09 PHP
如何写php程序?
2006/12/08 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
JS中数据结构之栈
2019/01/01 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
Python SQLite3简介
2018/02/22 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
商业计算机应用专业自荐书
2014/06/09 职场文书
商务经理岗位职责
2014/08/03 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
2016七夕情人节感言
2015/12/09 职场文书
创业计划书之宠物店
2019/09/19 职场文书
php 原生分页
2021/04/01 PHP
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis