2024年4月30日发(作者：)

addeventlistener的用法

addEventListener是JavaScript语言中一个常用的方法，用于在

DOM元素上绑定事件处理函数，以响应特定的事件。addEventListener具

有以下用法：

1.监听点击事件：

```javascript

const element = elector('#myButton');

ntListener('click', handleClick);

function handleClic

('Button clicked');

```

上述代码中，我们选取了一个id为myButton的DOM元素，并在其上

添加了一个点击事件监听器。当元素被点击时，会调用handleClick函数

并打印出"Button clicked"。

2.监听键盘事件：

```javascript

ntListener('keydown', handleKeyDown);

function handleKeyDown(event)

('Key pressed:', );

```

这段代码监听了整个文档上的按键事件。当文档中有任意一个键被按

下时，会调用handleKeyDown函数并将按键事件传递给它。函数会打印出

被按下的按键。

3.监听表单提交事件：

```javascript

const form = elector('form');

ntListener('submit', handleSubmit);

function handleSubmit(event)

tDefault(;

('Form submitted');

```

在上述例子中，我们选择了一个form元素，并在其上添加了一个提

交事件监听器。当表单提交按钮被点击时，会调用handleSubmit函数，

并打印出"Form submitted"。注意，在handleSubmit函数中我们调用了

tDefault(来阻止表单的默认提交行为。

4.监听鼠标移动事件：

```javascript

const element = elector('#myElement');

ntListener('mousemove', handleMouseMove);

function handleMouseMove(event)

('Mouse position:', X, Y);

```

这段代码监听了一个id为myElement的DOM元素上的鼠标移动事件。

当鼠标在该元素上移动时，会调用handleMouseMove函数，并打印出鼠标

的当前位置。

总结起来，addEventListener方法用于在HTML元素上绑定各种类型

的事件，并指定对应的事件处理函数。通过监听不同的事件，我们可以实

现交互效果、表单验证、用户输入等各种功能。这些例子只是

addEventListener的一些常见用法，实际上它可以监听很多不同的事件，

并可以配合其他DOM操作方法，实现更加复杂的功能。