在前端开发中，经常会添加事件监听器来处理用户交互。而在 JavaScript 中，有两种方式可以用来添加事件监听：使用
on 属性或者 addEventListener 方法。虽然它们都可以实现事件监听的功能，但却存在一些不同之处。
on 属性
on 属性是一个事件处理程序，其语法结构为：
element.on<event> = function;
其中，element 是要添加事件的元素，event 是事件名称，如 click、mousedown、keydown 等等；function 是当事件触发时执行的代码块。
例如，可以通过以下代码对按钮添加点击事件监听：
const button = document.querySelector('#myButton');
button.onclick = function() {
console.log('你点击了按钮！');
};
这样，当用户点击按钮时，控制台将输出一条消息。
addEventListener 方法
与 on 属性相比，addEventListener 方法提供了更多的灵活性和可扩展性。它可以同时添加多个事件监听，并且可以自定义事件处理函数的行为（如冒泡或捕获阶段，后文会介绍）。
该方法的语法结构为：
element.addEventListener(event, function, useCapture);
其中，element 是要添加事件的元素，event 是事件名称，如 click、mousedown、keydown 等等；function 是当事件触发时执行的代码块；useCapture 是一个可选的布尔值，表示事件是否在捕获阶段处理（默认为 false）。
例如，可以通过以下代码对按钮添加点击事件监听：
const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
console.log('你点击了按钮！');
});
这样，当用户点击按钮时，控制台将输出一条消息。
区别和注意事项
虽然两种方式都可以添加事件监听器，但它们之间还是存在一些关键区别的：
- 数量限制：使用
on属性只能添加一个事件监听器，而使用addEventListener方法可以添加多个事件监听器。 - 行为定制：使用
addEventListener方法提供了更多的灵活性和可扩展性，可以定义事件处理函数的行为（如捕获或冒泡），而on属性则没有这样的功能。 - 兼容性：
on属性是早期浏览器实现事件监听的方式，在一些较老的浏览器版本中可能无法正常工作；而addEventListener方法是标准的事件监听方式，在大多数现代浏览器中都可以正常使用。
此外，还需要注意以下几点：
- 如果要在同一个元素上添加多个相同类型的事件监听器，则使用
addEventListener方法更为合适。 - 在添加事件监听器时，应该先考虑使用
addEventListener方法，除非特殊需求需要使用on属性。 - 不要同时在同一个元素上使用
on属性和addEventListener方法添加相同类型的事件监听器，否则可能会导致事件处理函数被重复调用。
捕获和冒泡
在前面提到的 useCapture 参数中，如果将其设置为 true，则表示事件在捕获阶段执行事件处理函数；如果将其设置为 false 或省略该参数，则表示事件在冒泡阶段执行事件处理函数。
所谓“捕获阶段”和“冒泡阶段”，是指事件传递的两个阶段。在捕获阶段，事件从顶层元素开始向下传递，直到到达目标元素；在冒泡阶段，事件从目标元素
