DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)_jquery
俗话说的好，好记性不如个烂笔头，这么多技术文章如果不去吃透，技术点很快就容易忘掉，下面是小编平时浏览的技术文章，整理的笔记，分享给大家。
开发过程中我们都希望使用别人成熟的框架，因为站在巨人的肩膀上会使得我们开发的效率大幅度提升。不过，我们也应该、必须了解其基本原理。比如DOM事件，jquery框架帮我们为我们封装和抽象了各浏览器的差异行为，为事件处理带来了极大的便利。不过浏览器逐步走向统一和标准化，我们可以更加安全地使用官方规范的接口。因为只有获得众多开发者的芳心，浏览器才会走得更远。正如我们现在使用低版本浏览器打开某些页面时，会告知我们要用chrome等高级浏览器访问。不过这是一个革命的过程，为了让我们的webPage更好地服务更多的人，现在我们还不得不对这些历史遗留问题做更好的兼容。要做好兼容，除了依赖框架，我们得理解其基本原理。
DOM事件三个阶段
当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：
1.捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
2.目标阶段：到达目标事件位置（事发地），触发事件；
3.冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。
引用来源：http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
事件捕获与事件冒泡先后执行顺序就显而易见了。
实验部分
打开在线编辑器：http://jsbin.com/goqede/edit?html,css,js,output
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>Document</title>
<style>
#outer{
text-align: center;
width: px;
height: px;
background-color: #ccc;
margin: auto;
}
#middle{
width: px;
height: px;
background-color: #f;
margin: auto;
}
#inner{
width: px;
height: px;
background-color: #f;
margin: auto;
border-rad
}
</style>
</head>
<body>
<div id='outer'>
<span>outer</span>
<div id='middle'>
<span>middle</span>
<div id='inner'>
<span>inner</span>
</div>
</div>
</div>
<script>
function $(element){
return document.getElementById(element);
}
function on(element,event_name,handler,use_capture){
if(addEventListener){
$(element).addEventListener(event_name,handler,use_capture);
}
else{
$(element).attachEvent('on'+event_name,handler);
}
}
on("outer","click",o_click_c,true);
on("middle","click",m_click_c,true);
on("inner","click",i_click_c,true);
on("outer","click",o_click_b,false);
on("middle","click",m_click_b,false);
on("inner","click",i_click_b,false);
function o_click_c(){
console.log("outer_捕获");
alert("outer_捕获");
}
function m_click_c(){
console.log("middle_捕获")
alert("middle_捕获");
}
function i_click_c(){
console.log("inner_捕获")
alert("inner_捕获");
}
function o_click_b(){
console.log("outer_冒泡")
alert("outer_冒泡");
}
function m_click_b(){
console.log("middle_冒泡")
alert("middle_冒泡");
}
function i_click_b(){
console.log("inner_冒泡")
alert("inner_冒泡");
}
</script>
</body>
</html>当我们点击inner的时候结果是：
outer_捕获
middle_捕获
inner_捕获
inner_冒泡
middle_冒泡
outer_冒泡
由此可见：确实是先由外向内事件捕获，一直到事发元素，在由内向外冒泡到根节点上
tips：
当事件触发在目标阶段时，会根据事件注册的先后顺序执行，在其他两个阶段注册顺序不影响事件执行顺序。也就是说如果该处既注册了冒泡事件，也注册了捕获事件，则按照注册顺序执行。
例如当我点击inner的时候，按照以上顺序，答案确实是我们想要的答案：
、
当我的事件注册顺序改变成如下代码时：
当我们点击outer时：
当我们点击middle时：
当我们点击inner时：
可以看出在目标阶段的事发元素上的事件执行顺序是有事件注册顺序决定的
以上内容就是本文对DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)，希望对大家今后的工作、学习有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
掌握JavaScript中常见的事件冒泡机制
Feb 19, 2024 pm 04:43 PM
JavaScript中常见的冒泡事件：掌握常用事件的冒泡特性，需要具体代码示例引言：在JavaScript中，事件冒泡是指事件会从嵌套层次最深的元素开始向外层元素传播，直到传播到最外层的父级元素。了解并掌握常见的冒泡事件，可以帮助我们更好地处理用户交互和事件处理。本文将介绍一些常见的冒泡事件，并提供具体的代码示例来帮助读者更好地理解。一、点击事件（click
哪些JS事件不会向上传播？
Feb 19, 2024 am 08:17 AM
JS事件中哪些不会冒泡？在JavaScript中，事件冒泡是指当一个元素触发了某个事件时，该事件会逐级向上冒泡到更高层的元素，直到冒泡到文档根节点。然后，事件处理程序会按照冒泡的顺序依次执行。然而，并不是所有的事件都会冒泡。有些事件在触发后只会执行目标元素上的事件处理程序，而不会冒泡到更高层的元素上。下面是一些常见的不会冒泡的事件：focus和blur事件：
为何同一事件会触发两次冒泡？
Feb 19, 2024 pm 10:34 PM
为何同一个事件冒泡会重复发生两次？事件冒泡是一种在浏览器中常见的事件传递机制。当一个元素触发了某个事件，这个事件将会从被触发的元素开始向上级元素依次传递，直到传递到了文档的根元素。这个过程就像水泡在水中冒起，所以被称为事件冒泡。然而，有时我们会发现同一个事件冒泡会重复发生两次，这是为什么呢？原因主要有两个方面：事件注册和事件处理。首先，我们需要明确的是，事件
先捕获还是先冒泡？解析事件流程的优劣势
Feb 21, 2024 pm 02:36 PM
先捕获还是先冒泡？解析事件流程的优劣势事件流程是Web开发中一个重要的概念，它描述了事件从发生到被处理的过程。在处理事件时，有两种主要的流程模型：先捕获后冒泡和先冒泡后捕获。这两种模型在不同的场景下各有优劣势，需要根据实际情况选择合适的模型。先捕获后冒泡是指在事件冒泡阶段前，先执行事件捕获阶段。事件捕获阶段从事件目标的根节点开始，逐级向下传递，直到到达目标元
点击事件的冒泡机制及其在网页交互中的影响
Jan 13, 2024 pm 02:34 PM
单击事件冒泡的作用及其对网页交互的影响在网页开发中，事件是实现交互和响应用户操作的关键。其中，事件冒泡是一种常见的事件机制，它允许一个嵌套的元素层次结构中的事件同时被多个元素响应。本文将详细解释单击事件冒泡的作用，并说明它对网页交互的影响，同时提供一些具体的代码示例。一、单击事件冒泡的概念单击事件冒泡（ClickEventBubbling）指的是当一个元
如何在MacBook Pro上截屏
Jul 19, 2023 pm 07:53 PM
本指南将向您展示您必须在MacBookPro上截屏。MacBook以其时尚的设计和强大的性能而闻名，但这些功能强大的笔记本电脑具有许多经常被忽视的便捷功能。其中一个功能是用于捕获屏幕截图的内置工具。本文将逐步指导您如何在MacBookPro上截屏，无论您是要捕获整个屏幕还是仅捕获屏幕的特定部分。什么是屏幕截图？屏幕截图，也称为屏幕截图，是由计算机或移动设备拍摄的数字图像，用于记录屏幕上可见的项目。屏幕截图通常用于创建您无法轻松另存为文件的图像或文本的记录、与他人共享屏幕视图或创建指南和教程，就像
异常处理：PHP中如何捕获和处理异常？
Dec 18, 2023 pm 12:52 PM
异常处理：PHP中如何捕获和处理异常？在PHP开发中，异常处理是非常重要的一环。当程序发生意外情况或错误时，我们需要通过捕获和处理异常来保证程序的正常运行。PHP中提供了一套异常处理的机制，本文将介绍如何在PHP中捕获和处理异常，并提供具体的代码示例。一、PHP中异常的基本概念在PHP中，异常是指程序在运行过程中发生的一种非正常情况，比如错误、警告、致命错误
探索单击事件冒泡，掌握前端开发的关键原理
Jan 13, 2024 am 10:56 AM
学习单击事件冒泡，掌握前端开发中的关键概念，需要具体代码示例前端开发是当今互联网时代中的一个重要领域，而事件冒泡是前端开发中的一个关键概念之一。理解和掌握事件冒泡对于编写高效的前端代码至关重要。本文将介绍什么是事件冒泡，以及如何在前端开发中使用事件冒泡的概念。一、什么是事件冒泡事件冒泡是指当一个元素上的事件被触发时，会先从最内层的元素开始，然后逐级向父级元素
