<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#a {
background-color: #933;
float: left;
height: 90px;
width: 90px;
}
#b {
background-color: #655;
height: 60px;
width: 60px;
}
#c {
background-color: #334;
height: 30px;
width: 30px;
}
#d {
background-color: #489;
float: right;
height: 30px;
width: 30px;
}
</style>
</head>
<body>
<div id="a">a
<div id="b">b
<div id="c">c
</div>
</div>
</div>
<div id="d">d
</div>
<script type="text/javascript">
<!--
var a=document.getElementById("a");
var b=document.getElementById("b");
var c=document.getElementById("c");
var d=document.getElementById("d");
a.addEventListener("click",function(){alert("a")},0);
b.addEventListener("click",function(){alert("b")},1);
c.addEventListener("click",function(){alert("c")},0);
d.addEventListener("click",function(){alert("d")},0);
//-->
</script>
</body>
</html>
b.addEventListener("click",function(){alert("a")},0);
当最后一个参数是1,点击c的时候,在顺事件流中则b不捕获,证明b不拦截
分享到：
相关推荐
DOM事件模型分为三个层次：**事件冒泡（Event Bubbling）**、**事件捕获（Event Capturing）**和**DOM2级事件模型**。事件冒泡是从最深的节点开始，逐级向上层节点传播事件；事件捕获则相反，从最外层节点开始，向下...
这种技术的核心在于事件模型，它是JavaScript和DOM（文档对象模型）交互的重要机制。 事件模型分为三个阶段：冒泡、目标和捕获。在IE浏览器中，事件通常从最具体的元素（如一个按钮）开始，然后向上冒泡到更不具体...
冒泡事件和事件捕获是JavaScript中处理事件传播的两种主要模型，它们定义了事件在DOM树中传播的顺序。在实际的Web开发中，深入理解这两种模型对于正确处理事件，避免潜在的问题至关重要。 冒泡事件是指当一个事件在...
DOM2事件模型规则描述了创建、捕获、控制与取消事件的标准方法，还描述了事件传播行为，也就是说，一个事件如何到达其目标，以及达到后将要发生的动作。在6中，由于没有提供对 DOM2事件模型的支持,因此,本章中涉及...
本文将深入解析JavaScript中的事件捕获机制，并结合实际的例子讲解事件冒泡原理和不同浏览器（特别是IE和DOM标准）中的事件模型。 首先，我们需要理解什么是事件冒泡。事件冒泡是指当一个元素上的事件被触发后，该...
5. **总结**：事件冒泡和事件捕获是JavaScript事件模型的两个阶段，它们定义了事件如何在DOM树中传播。事件委托则是一种高效利用事件处理的策略，可以降低内存消耗，提高性能，尤其适用于动态添加或删除DOM元素的...
在DOM2级事件处理模型中，可以通过设置`addEventListener`方法的第三个参数来指定事件处理函数是在捕获阶段还是冒泡阶段执行。 ```javascript // 在冒泡阶段执行 button.addEventListener('click', function(event)...
7. **DOM事件流**：包括捕获阶段、目标阶段和冒泡阶段，理解事件流有助于更好地管理事件处理程序。 8. **DOM加载与解析**：了解`DOMContentLoaded`事件，当DOM树构建完成但不包括外部资源时触发，以及`load`事件，...
DOM Level 2引入了完整的事件模型，支持捕获和冒泡两种事件流，并且DOM Level 3继续沿用了这个模型。然而，不同的浏览器在实现上存在差异，比如IE有一个专有的事件模型，与DOM标准不同。 在JavaScript中，事件接口...
JavaScript 中的 DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。它使得开发者可以使用 JavaScript 来动态地访问和操作文档的结构和内容。DOM 中的基础概念是开发者需要掌握的基本知识...
JavaScript事件模型主要有两种：DOM（Document Object Model）事件流和W3C事件模型。DOM事件流包括三个阶段：事件捕获、目标阶段和事件冒泡。在捕获阶段，事件从最外层的元素（如HTML文档）向下传递到目标元素。然后...
在JavaScript中，DOM0级事件处理程序是一种早期的事件处理方式，它是在DOM（文档对象模型）规范尚未完全定义事件处理机制时广泛使用的。在DOM0级事件中，事件处理程序的绑定和解绑是通过直接将函数赋值给元素的特定...
这里我们将深入探讨三种主要的事件绑定模型：内联模型、脚本模型和DOM2级事件模型。 1. **内联模型**： 这是最原始的事件处理方式，通过HTML元素的事件属性（如`onclick`）直接指定处理函数。例如： ```html ...
在JavaScript的事件处理中，事件冒泡和事件捕获是两个关键的概念，它们定义了事件在DOM（文档对象模型）中的传播方式。事件通常由用户交互触发，如点击按钮、鼠标移动等，当这些事件发生时，它们会在元素及其祖先...
DOM模型将网页或XML文档解析为一个由节点组成的树形结构，每个节点代表文档的一部分，如元素、属性、文本等。在DOM2010版中，这个标准得到了进一步的完善和扩展。 DOM的主要优点在于它的灵活性和可操作性。通过DOM ...
事件冒泡、事件捕获和事件委托是JavaScript事件模型中的三个重要概念。 首先，事件捕获是一种事件处理机制，它从DOM树的根节点（window对象）开始，向下遍历到目标元素。这种机制使得事件首先在最不具体的节点（即...
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。 （3）DOM事件流：同时支持两种事件模型：捕获型事件
虽然`dispatchEvent`简单易用，但在实际应用中，JavaScript提供了更完善的事件处理接口，如`addEventListener`、`removeEventListener`和`dispatchEvent`，它们遵循W3C标准的DOM事件模型。这些方法允许更灵活地添加...