JavaScript 中如何实现事件监听器？

1. 使用 `addEventListener` 方法 `addEventListener` 是最常用的添加事件监听器的方法，它是 `DOM` (Document Object Model) 提供的原生 API。

HTML 元素实例：

```html 点击我 ```

JavaScript 示例：

```javascript document.getElementById("myButton").addEventListener("click", function() { alert("按钮被点击了！"); }); ```

2. 使用 `addEventLister` (jQuery) 如果你在项目中使用 jQuery，你可以使用它的 `on()` 方法来添加事件监听器。这种方式通常会使代码更简洁。 ```html 点击我 ```

JavaScript 示例：

```javascript $(document).ready(function(){ $("#myButton").on("click", function() { alert("按钮被点击了！"); }); }); ``` 或者简写为： ```javascript $(document).ready(function(){ $("#myButton").click(function(){ alert("按钮被点击了！"); }); }); ```

3. 使用 `querySelector` 和 `addEventListener` 你可以使用 `querySelector` 方法来选择具有特定类或 ID 的元素，然后添加事件监听器。

HTML 示例：

```html 点击我 ```

JavaScript 示例：

```javascript document.querySelector(".myClass").addEventListener("click", function() { alert("按钮被点击了！"); }); ```

4. 使用 `addEventListener` 和事件冒泡 事件冒泡（bubble）是事件传播的一种方式，它从最内层元素开始向上传播。如果你想确保父元素的监听器能接收到事件，可以使用 `event.stopPropagation()` 方法来阻止子元素的监听器执行。 ```javascript document.body.addEventListener("click", function(event) { if (event.target === event.srcElement) { // 单击事件在目标和源上相同时执行（例如：文本节点被点击） alert("按钮被单击了！"); } }); document.getElementById("myButton").addEventListener("click", function() { alert("按钮被点击了！但是不会阻止其父元素的监听器执行。"); }); ``` 以上就是在 JavaScript 中实现事件监听器的一些常见方法和示例。选择哪种方式取决于你的需求、代码库（如 jQuery）以及项目中现有的结构。在实际应用中，通常推荐使用原生的 `addEventListener` 方法或 jQuery 的 `on()` 方法，因为它们更为通用且易于理解和维护