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

作者：qdmoment 时间：2024-02-27 07:53:34　

本文实例讲述了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

标签：js,事件,冒泡,捕获

投稿

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

猜你喜欢

Go项目编写Makefile规则文件概述

日常收集整理php正则表达式(超常用)

python逆向微信指数爬取实现步骤

PHP使用JpGraph绘制折线图操作示例【附源码下载】

一小时学会TensorFlow2之基本操作1实例代码

Pandas 按索引合并数据集的方法

python中matplotlib实现随鼠标滑动自动标注代码

Golang命令行进行debug调试操作

Python对list列表结构中的值进行去重的方法总结

MySQL 开窗函数

《Python之禅》中对于Python编程过程中的一些建议

基于Vue3实现日历组件的示例代码

js 实现数值的千分位及保存小数方法(推荐)

javascript模拟鼠标自动点击链接

mysql installer community 5.7.16安装详细教程

抛砖：如何进行互联网项目开发

查看mysql当前连接数的方法详解

Python with语句上下文管理器两种实现方法分析

手把手带你用python爬取小姐姐私房照

Python如何使用opencv进行手势识别详解