带你快速理解javascript中的事件模型

JavaScript中的事件模型：DOM0与DOM2的奥秘

对于想要深入了解JavaScript事件模型的朋友来说，这篇文章将带你揭开DOM0级事件模型和DOM2级事件模型的神秘面纱。

一、DOM0级事件模型初探

DOM0级事件模型是早期的事件处理方式，所有浏览器都支持。实现起来相当简单。想象一下这样一个场景：<一个点击事件的触发》。

代码示例：

点击我

这种模型通过在DOM对象上直接注册事件名称来工作。需要注意的是，DOM0级事件模型中，一个DOM对象只能注册一个同类型的函数。如果尝试注册多个同类型函数，之前的函数会被新的函数覆盖。

二、DOM2级事件模型的奥秘

1. 事件捕获与事件冒泡（Capture, Bubble）

相比DOM0级事件模型，DOM2级事件模型更加复杂且功能更丰富。特别是事件捕获和事件冒泡机制，使得事件处理更加灵活。在IE8及以下版本不支持这种事件模型。假设我们有两个嵌套的div元素，点击内部div时，事件的流程是怎样的呢？答案是：先执行捕获阶段（从document到内部元素），然后执行冒泡阶段（从内部元素回到document）。

代码示例：

2. DOM2级的注册事件和解除事件

在DOM2级中，我们使用`addEventListener`和`removeEventListener`来注册和解除事件。这种方法的好处是，一个DOM对象可以注册多个相同类型的事件，而不会发生覆盖。各个事件函数会依次执行。

使用示例：

addEventListener('事件名称', '事件回调', '捕获/冒泡');

JavaScript的事件模型为开发者提供了丰富的工具来处理用户交互。无论是简单的DOM0级事件模型，还是更高级的DOM2级事件模型，都是JavaScript的重要组成部分。通过深入了解这些模型，我们可以创建更响应、更用户友好的应用程序。DOM事件处理机制：事件捕获与冒泡

我们有两个div元素，一个包裹着另一个。当我们点击内部的div时，会发生什么呢？在DOM（文档对象模型）的事件处理机制中，有两种主要的方式处理这种情况：事件捕获和事件冒泡。

事件捕获阶段是从最外层元素开始，一直向内传播，直到触发事件的元素。而事件冒泡阶段则是从触发事件的元素开始，向外层元素传播。为了更好地理解这一过程，我们可以借助一个示例。

在这个示例中，内部的div元素在点击时触发了两个事件处理函数。当使用事件捕获时，外部的div首先捕获到事件，然后才是内部的div。如果我们为外部的div设置事件捕获阶段的点击事件，那么它会先执行。接着，内部的div在捕获阶段也注册了点击事件，所以它会执行。接着，当事件冒泡时，仍然是内部div先执行，然后是外部div。

如果我们改变策略，让内部div在冒泡阶段注册两个点击事件处理函数，那么这两个函数会依次执行。这是因为事件冒泡是从内向外传播的，所以先触发内部的元素，然后才是外部的元素。值得注意的是，事件的注册顺序会影响处理函数的执行顺序。

为了更好地理解这一过程，我们可以想象一个场景：在一个房间里（外部div），有一个人（内部div）被两个人（两个处理函数）同时关注。当这个人做出某个动作（点击）时，首先被房间外的人看到（事件捕获阶段），然后是这个人的动作被房间内的人看到（事件冒泡阶段）。而房间内的人可能会先注意到某些细节（先注册的处理函数先执行）。

在编写事件处理函数时，我们需要清楚我们是在使用事件捕获还是事件冒泡，以及我们的处理函数应该在哪个阶段执行。这样可以帮助我们更好地控制应用程序的行为，确保我们的代码按照预期的方式运行。关于事件冒泡的：阻止外层元素事件触发的方法

在我们日常的Web开发中，经常会遇到需要处理DOM元素上的各种事件，如click、mouseover等。有时，我们可能会遇到这样的情况：给外层元素（outer）和内层元素（inner）都注册了相同的click事件，但我们希望内层元素的点击事件阻止外层元素的click事件触发。这时，我们就需要借助事件冒泡和`event.stopPropagation()`函数来实现。

事件冒泡是浏览器处理事件的一种机制。当一个元素触发某个事件时，这个事件会向这个元素的父级元素传递，直到到达最外层的根元素。这样，我们就可以在任意级别的元素上捕获到事件。但有时候，这种机制并不总是我们想要的。比如在一个自定义的下拉框中，当我们点击下拉框内的选项时，我们不希望下拉框外的元素触发其事件。这时，就需要用到`event.stopPropagation()`函数来阻止事件的继续传播。

让我们通过一个简单的示例来了解如何使用这个函数。假设我们有如下的HTML结构：

```html

```

对应的JavaScript代码如下：

```javascript

// JavaScript代码

var clickInner = document.getElementById('inner');

var clickOuter = document.getElementById('outer');

clickInner.addEventListener('click', function(event){

alert('内层元素被点击');

event.stopPropagation(); // 阻止事件冒泡到外层元素

}, false);

clickOuter.addEventListener('click', function(){

alert('外层元素被点击'); // 此函数不会被触发，因为内层元素阻止了事件冒泡

}, false);

```

在这个例子中，当我们点击内层元素时，只会触发内层元素的click事件，外层元素的click事件不会受到触发。这是因为我们在内层元素的click事件处理函数中调用了`event.stopPropagation()`函数，阻止了事件的继续传播。这样，我们就可以根据需要来控制事件的传播范围。需要注意的是，这种方式只能阻止事件冒泡，而不能阻止事件捕获阶段的事件触发。由于大多数事件处理都在冒泡阶段进行，因此这种机制通常能满足我们的需求。希望这个例子能对大家的学习有所帮助！