js点击事件的执行过程实例分析【冒泡与捕获】
作者:qdmoment 发布时间:2024-02-27 07:53:34
标签:js,事件,冒泡,捕获
本文实例讲述了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);
希望本文所述对大家JavaScript程序设计有所帮助。
来源:https://blog.csdn.net/qdmoment/article/details/100152902
0
投稿
猜你喜欢
- 要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难。今天来介绍几个简单的方法。使用第三方服务有这样的一种简单的方式
- 1.常用数据结构之列表我们先给大家一个编程任务,将一颗色子掷6000次,统计每个点数出现的次数。这个任务对大家来说应该是非常简单的,我们可以
- 今天呱呱发了一个网址给我看,大概效果就是类似幻灯片的效果。当时我的第一反映这个是不是用锚点做的啊呢,以前在网上看过用锚点做的这类的效果。脑袋
- 今天真的被编码问题一直困扰着,午休都没进行。也真的见识到了各种编码。例如:gbk,unicode、utf-8、ansi、gb2312等。如果
- # django manage.py扩展自定义命令环境: mac django1.10.3在实际的项目开发过程中,我们可能要执行某脚本初始化
- 本文实例讲述了python获取本地计算机名字的方法。分享给大家供大家参考。具体如下:import sys, sockethostname =
- 每次卷积神经网络训练的结果都只保存了最后一部分,查阅了一下相关资料,发现是定义saver时采用的默认值,这里进行如下设置: saver =
- 最近因为要安装Tensorflow,然后发现tensorflow居然不支持python3.7,于是怒而将其降级到3.6以下是具体命令,mar
- 下面是我们经常会用到且非常有用的MySQL命令。下面你看到#表示在Unix命令行下执行命令,看到mysql>表示当前已经登录MySQL
- 最近心血来潮加上有点闲情,动手写了第一个JavaScript版的俄罗斯方块Easy Tetris.先上Easy Tetris俄罗斯方块游戏截
- 如下所示:def test1(): import os return1=os.system('ping 8.8.8.8')
- numpy中的ndarray转化成pytorch中的tensor : torch.from_numpy()pytorch中的tensor转化
- 一、前言B站上的漂亮的小姐姐真的好多好多,利用 you-get * 下载了一个 B 站上跳舞的小姐姐视频,利用视频中的弹幕来制作一个漂亮小姐
- 微信小程序中使用地图(map)组件,通过点击(tap)获取经纬度,按照官方的回应,暂时是没法做到的,从地图组件API多有残缺判断,怀疑是个实
- 导语大家早上好哈!——有没有想我啊?木木子来啦,今日上线放一波大招给大家!刚学会了录制视频,之后的效果动态显示终于完美录制出来了!今天跟着小
- 本文实例讲述了Python使用cx_Freeze库生成msi格式安装文件的方法。分享给大家供大家参考,具体如下:①.需要在目录下面创建一个文
- what's the math 模块Python math 模块提供了许多对浮点数的数学运算函数。需要注意的是,这些函数一般是对平台
- 代码如下:<% class MyClass Dim var '公共变量必须使
- python __init__.py 和 __all__作用一、__init__.py1、导入文件夹包的时候,会运行写在该文件夹包下的__i
- 摘要RepVgg通过结构重参数化让VGG再次伟大。 所谓“VGG式”指的是:没有任何分支结构。即通常