在JavaScript中，`addEventListener` 和 `on` 是两种常见的用于添加事件监听器的方法，它们在处理事件时有所区别。这篇文章将深入探讨这两种方法的工作原理及其差异。
`addEventListener` 是DOM Level 2规范引入的一个标准方法，允许我们为一个元素添加一个或多个相同类型的事件监听器，而不会覆盖之前绑定的事件。例如，在上面的例子中，通过`addEventListener`，我们可以为同一个元素的`click`事件添加两个不同的处理函数，这两个函数都会被调用，不会互相覆盖：
```javascript
window.onload = function() {
var box = document.getElementById("box");
box.addEventListener("click", function() {
console.log("我是box1");
});
box.addEventListener("click", function() {
console.log("我是box2");
});
};
```
这里，当点击`box`元素时，控制台会依次输出"我是box1"和"我是box2"，因为两个监听器都得到了执行。
而 `on` 是非标准的DOM0级事件处理方式，它通常用来直接赋值一个函数给特定事件，如`onclick`、`onmouseover`等。这种方式的问题在于，当为同一个事件再次赋值时，新的函数会覆盖旧的函数，就像下面的例子所示：
```javascript
window.onload = function() {
var box = document.getElementById("box");
box.onclick = function() {
console.log("我是box1");
};
box.onclick = function() {
box.style.fontSize = "18px";
console.log("我是box2");
};
};
```
在这种情况下，只有第二个`onclick`函数生效，控制台只会输出"我是box2"，因为第二个函数覆盖了第一个。
`addEventListener` 还有一个重要的特性是它可以设置事件处理程序的执行阶段，即事件捕获（capture）阶段或冒泡（bubbling）阶段。第三个参数是一个布尔值，如果为 `true`，则事件处理程序会在捕获阶段执行；如果为 `false`（默认），则在冒泡阶段执行。例如：
```javascript
// 捕获阶段执行
box.addEventListener("click", function() {
console.log("box");
}, true);
// 冒泡阶段执行
child.addEventListener("click", function() {
console.log("child");
});
```
在事件冒泡的过程中，事件从最具体的元素（子元素`child`）开始，向上冒泡到父元素`box`。而在事件捕获中，事件从最不具体的元素（父元素`box`）开始，向下捕获到子元素`child`。
总结来说，`addEventListener` 提供了更高级的功能，如多个事件处理程序的添加和选择执行阶段，而 `on` 方法则更为简单，但功能有限。在现代JavaScript开发中，推荐使用 `addEventListener`，因为它具有更好的可维护性和灵活性。
