JavaScript on() 方法详解187

简介`on()` 方法是 JavaScript 中用于监听 DOM 元素上特定事件的函数。通过 `on()` 方法，可以将一个或多个事件监听器附加到一个 DOM 元素上，当触发特定的事件时，这些监听器就会被执行。

语法```javascript
(event, listener);
```
其中：
* `element`：要添加监听器的 DOM 元素
* `event`：要监听的事件，例如 "click"、"mouseover" 或 "keydown"
* `listener`：当事件触发时要执行的函数，它可以是一个匿名函数或一个命名的函数

用法以下示例展示了如何使用 `on()` 方法为一个按钮元素添加点击事件监听器：
```javascript
const button = ('button');
('click', function() {
alert('按钮被点击了！');
});
```
当用户点击按钮时，上面的代码会弹出 "按钮被点击了！" 的警报框。

事件类型`on()` 方法可以监听各种各样的事件类型，包括：
* `click`：当元素被点击时触发
* `mouseover`：当鼠标指针悬停在元素上时触发
* `mouseout`：当鼠标指针离开元素时触发
* `keydown`：当按下键盘上的某个键时触发
* `keyup`：当释放键盘上的某个键时触发
* `change`：当元素的值发生变化时触发

多个事件监听器`on()` 方法允许为同一事件类型添加多个事件监听器。这些监听器将按添加的顺序执行。例如，可以为一个按钮元素添加两个点击事件监听器：
```javascript
const button = ('button');
('click', function() {
('第一个监听器被触发');
});
('click', function() {
('第二个监听器被触发');
});
```
当用户点击按钮时，上面的代码将打印 "第一个监听器被触发" 和 "第二个监听器被触发" 到控制台。

移除事件监听器可以通过 `off()` 方法从 DOM 元素上移除事件监听器。`off()` 方法的语法与 `on()` 方法类似：
```javascript
(event, listener);
```
例如，以下代码从按钮元素上移除点击事件监听器：
```javascript
const button = ('button');
const listener = function() {
('按钮被点击了！');
};
('click', listener);
('click', listener);
```
在执行 `off()` 方法后，当用户点击按钮时，将不再打印 "按钮被点击了！" 到控制台。

委托委托是一种技术，它允许将事件监听器添加到父元素，而不是直接添加到子元素。这对于处理动态创建的元素或具有大量子元素的元素非常有用。
例如，可以为一个容器元素添加点击事件监听器，并使用以下代码委托点击事件到其子元素：
```javascript
const container = ('.container');
('click', function(event) {
const target = ;
if ( === 'BUTTON') {
('按钮被点击了！');
}
});
```
在上面的代码中，每次点击容器元素或其任何子元素时，都会触发事件监听器。如果目标元素是按钮，则会打印 "按钮被点击了！" 到控制台。

其他方法除了 `on()` 方法，还有一些其他方法可用于监听 DOM 事件：
* `addEventListener`：与 `on()` 方法类似，但它允许使用更多的事件选项和监听器选项
* `attachEvent`：Internet Explorer 中使用的过时方法
* `onclick`：元素属性，它等同于使用 `on()` 方法添加点击事件监听器

总结`on()` 方法是 JavaScript 中一个强大的工具，用于监听 DOM 元素上的特定事件。通过了解其语法、用法和高级功能，可以有效地处理用户交互和构建交互式 Web 应用程序。

2024-12-08

上一篇：JavaScript 方法：一探其精妙与强大

下一篇：JavaScript 循环：掌握循环控制流的基础