js之dom2级事件的示例分析

DOM2级事件是JavaScript中事件模型的重要组成部分。它提供了更丰富的事件类型和处理程序，并且可以让开发者更加轻松地操作DOM元素。在这篇文章中，我们将通过一个简单的示例来学习DOM2级事件的基础知识和使用技巧。

示例场景

我们假设有一段HTML代码，它包含一个按钮和一个文本框：

<button id="btn">Click me</button>
<input type="text" id="input">

我们的目标是：当用户在文本框中输入文字并按下回车键时，按钮的文本内容将会变成输入框中的内容。

添加事件处理程序

首先，我们需要在JavaScript中获取到这个按钮和文本框的元素：

var btn = document.getElementById("btn");
var input = document.getElementById("input");

然后，我们需要给文本框添加一个键盘事件处理程序，它会在用户按下回车键时触发：

input.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    // 回车键的keyCode是13
  }
});

在事件处理程序中，我们检查事件对象的keyCode属性，如果它等于13，说明用户按下了回车键。接下来，我们需要修改按钮的文本内容，将它设置为文本框中的内容：

input.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    var value = input.value;
    btn.innerHTML = value;
  }
});

现在，整个事件处理程序的代码如下：

var btn = document.getElementById("btn");
var input = document.getElementById("input");

input.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    var value = input.value;
    btn.innerHTML = value;
  }
});

在浏览器中运行这段代码，然后在文本框中输入文字并按下回车键，你会看到按钮的文本内容已经变成了输入框中的内容。

事件捕获和冒泡

在DOM2级事件中，事件处理程序可以绑定到事件的捕获或冒泡阶段。在上面的示例中，我们没有指定事件的阶段，默认是绑定到事件的冒泡阶段。这意味着事件首先由文本框的子元素处理，然后向上层元素冒泡，直到到达按钮元素。

如果我们想要将事件处理程序绑定到事件的捕获阶段，需要使用addEventListener()的第三个参数，将它设置为true：

input.addEventListener("keydown", function(event) {
  // 处理程序在事件的捕获阶段执行
}, true);

在上面的示例中，我们将事件处理程序绑定到了事件的捕获阶段，这表示事件首先会被按钮元素的父元素处理，然后向下层元素捕获，直到到达文本框元素。

如果您想要了解更多关于事件捕获和冒泡的内容，可以参考这篇文章：[从事件模型看冒泡、捕获、代理、委托](https://www.jianshu.com/p/2c4bb2d2f5d7)

阻止默认行为和停止事件传播

有时候，我们需要阻止事件的默认行为或者停止事件的传播。比如，在上面的示例中，当用户按下回车键时，文本框会自动换行，这可能会破坏我们的交互效果。要解决这个问题，我们需要阻止事件的默认行为：

input.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault(); // 阻止输入框的默认行为
    var value = input.value;
    btn.innerHTML = value;
  }
});

在事件处理程序中，我们调用了event.preventDefault()方法，阻止了文本框的默认行为。这样，当用户按下回车键时，不会出现换行，而是直接触发我们的事件处理程序。

类似地，当我们想要停止事件传播时，可以调用event.stopPropagation()方法。比如，如果我们不想让事件在按钮元素中继续传播，可以这样写：

input.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    event.stopPropagation(); // 停止事件在按钮元素中继续传播
    var value = input.value;
    btn.innerHTML = value;
  }
});

这样，当用户按下回车键时，只有文本框元素和包含它的元素会处理事件，事件不会再传播到按钮元素。

总结

通过这个简单的示例，我们学习了DOM2级事件的基础知识和使用技巧，包括添加事件处理程序、捕获和冒泡阶段、阻止默认行为和停止事件传播等。当然，DOM2级事件还有许多其他的特性和用法，我们需要在实际开发中不断地学习和掌握。

如果您对JavaScript中的事件模型有兴趣，可以参考这篇文章：[JavaScript事件模型详解](https://www.jianshu.com/p/a5bfffa7f5c9)