JavaScript 作为一门脚本语言，广泛应用于互联网开发当中。在前端开发当中，用户操作往往是前后端交互中最重要的一环。而 JavaScript 事件机制便是为了响应这些用户操作而设计的。本文将结合实例深入探讨 JavaScript 事件机制。

一、事件和事件监听器

在 JavaScript 中，事件是指用户在页面中触发的某种行为，比如页面滚动，点击按钮，鼠标移入等。事件监听器则是指 JavaScript 代码需要对该事件做出响应的方法。在 HTML 中，通常采用以下方式触发事件

```

Click me!

```

这里将 onclick 作为事件监听器，alert('Hello!') 作为响应方法。但这种方式容易产生混乱，所以推荐使用 JavaScript 来注册事件监听器，例如：

```

document.getElementById("myBtn").addEventListener("click", function() {

alert("Hello World!");

});

```

addEventListener 是一种更为规范和灵活的注册事件监听器的方式。addEventListener 的第一个参数是事件类型，第二个参数是响应函数。这种方式能够支持多个事件监听器，从而使得事件响应更加优雅。

二、事件冒泡和捕获

在浏览器中，事件会从最具体的元素开始，逐级向上传播，直到到达根节点。这个过程被称为事件冒泡。例如：

```