js 怎么给dom添加监听事件

JS 给 DOM 添加监听事件的方法

在 JavaScript 中，给 DOM 元素添加监听事件的常用方法包括：addEventListener方法、内联事件处理器、事件处理器属性。其中，addEventListener方法 是最推荐的方式，因为它更灵活、支持多个处理器、具有良好的兼容性。接下来，我们将详细介绍如何使用 addEventListener 方法给 DOM 元素添加监听事件。

一、addEventListener方法

1. 基本用法

addEventListener 方法是最常用的方法，它可以将多个事件处理程序附加到同一个元素，而不会覆盖现有的事件处理程序。

document.getElementById('myButton').addEventListener('click', function() {

    alert('Button clicked!');
});

在这段代码中，我们给 ID 为 myButton 的按钮添加了一个点击事件监听器，当按钮被点击时，将会弹出一个提示框。

2. 事件类型

addEventListener 方法支持多种事件类型，如鼠标事件、键盘事件、表单事件等。常见的事件类型包括：

• click：当用户点击某个元素时触发
• mouseover：当鼠标指针移动到某个元素上时触发
• keydown：当用户按下键盘上的某个键时触发

document.getElementById('myInput').addEventListener('keydown', function(event) {

    console.log('Key pressed: ', event.key);
});

二、内联事件处理器

内联事件处理器是将事件处理器直接写在 HTML 元素的属性中，虽然这种方法比较简单，但不推荐使用，因为它会使 HTML 与 JavaScript 紧密耦合，难以维护。

<button id="myButton" onclick="alert('Button clicked!')">Click me</button>

三、事件处理器属性

事件处理器属性是将事件处理器函数赋值给元素的事件属性，这种方法虽然比内联事件处理器好一些，但仍然不如 addEventListener 灵活。

document.getElementById('myButton').onclick = function() {

    alert('Button clicked!');
};

四、事件委托

事件委托是一种通过利用事件冒泡机制，将事件处理程序添加到父元素上，而不是每个子元素上，从而提高性能的方法。

document.getElementById('parent').addEventListener('click', function(event) {

    if (event.target && event.target.matches('button.myButton')) {
        alert('Button clicked!');
    }
});

在这段代码中，我们将点击事件处理程序添加到父元素 parent 上，通过判断事件目标是否匹配 button.myButton 来处理子按钮的点击事件。

五、移除事件监听器

如果需要移除事件监听器，可以使用 removeEventListener 方法。需要注意的是，移除事件监听器时必须提供与添加时相同的函数引用。

function handleClick() {

    alert('Button clicked!');
}
document.getElementById('myButton').addEventListener('click', handleClick);
document.getElementById('myButton').removeEventListener('click', handleClick);

六、捕获与冒泡

事件捕获与冒泡是 JavaScript 事件流的两个阶段。默认情况下，addEventListener 方法在事件冒泡阶段触发事件处理程序。如果需要在事件捕获阶段触发，可以传递第三个参数 true。

document.getElementById('myButton').addEventListener('click', function() {

    alert('Button clicked!');
}, true);

七、总结

通过以上介绍，我们可以看到，addEventListener 方法 是给 DOM 元素添加监听事件的最佳选择。它不仅支持多种事件类型，而且能够添加多个处理程序，不会覆盖现有的处理程序。对于复杂的事件处理需求，还可以使用事件委托和捕获与冒泡机制，从而提高代码的性能和可维护性。

在项目管理中，特别是涉及到复杂的前端交互时，合理地使用事件监听机制是必不可少的。如果你正在进行研发项目管理，可以考虑使用研发项目管理系统PingCode，而对于通用项目协作，Worktile 也是一个不错的选择。这些工具可以帮助团队更高效地协作和管理项目进度。

相关问答FAQs：

1. 如何使用JavaScript给DOM元素添加监听事件？
JavaScript提供了多种方式来给DOM元素添加监听事件。以下是几种常用的方法：

• 使用addEventListener方法：使用该方法可以为DOM元素添加各种事件，如click、mouseover等。例如，要为一个按钮添加点击事件的监听器，可以使用以下代码：

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  // 在此处编写处理点击事件的代码
});

• 使用on事件属性：每个DOM元素都有对应的on事件属性，可以直接给它们赋值为一个函数来添加监听事件。例如，要为一个输入框添加键盘按下事件的监听器，可以使用以下代码：

const input = document.getElementById('myInput');
input.onkeydown = function(event) {
  // 在此处编写处理按键事件的代码
};

• 使用jQuery库：如果你使用了jQuery库，可以使用其提供的方法来简化DOM事件的处理。例如，要为一个div元素添加鼠标移入事件的监听器，可以使用以下代码：

$('#myDiv').on('mouseenter', function() {
  // 在此处编写处理鼠标移入事件的代码
});

2. 如何在JavaScript中移除DOM元素的监听事件？
在JavaScript中，要移除DOM元素的监听事件，可以使用removeEventListener方法或将对应的事件属性设置为null。以下是两种常用的方法：

• 使用removeEventListener方法：如果之前使用addEventListener方法添加了监听事件，可以使用removeEventListener方法来移除事件监听器。例如，要移除一个按钮的点击事件监听器，可以使用以下代码：

const button = document.getElementById('myButton');
const handleClick = function() {
  // 在此处编写处理点击事件的代码
};
button.addEventListener('click', handleClick);

// 在需要移除监听器的地方
button.removeEventListener('click', handleClick);

• 将事件属性设置为null：如果之前使用on事件属性添加了监听事件，可以将对应的事件属性设置为null来移除事件监听器。例如，要移除一个输入框的键盘按下事件监听器，可以使用以下代码：

const input = document.getElementById('myInput');
input.onkeydown = function(event) {
  // 在此处编写处理按键事件的代码
};

// 在需要移除监听器的地方
input.onkeydown = null;

3. 如何使用JavaScript给动态添加的DOM元素添加监听事件？
在JavaScript中，如果你动态地添加了DOM元素，并希望给它们添加监听事件，可以使用事件委托（event delegation）的方式。事件委托是将事件监听器添加到父元素上，通过事件冒泡的机制来处理子元素的事件。以下是一个示例：

const parentElement = document.getElementById('parentElement');

parentElement.addEventListener('click', function(event) {
  const targetElement = event.target;
  
  // 判断点击的是哪个子元素
  if (targetElement.classList.contains('childElement')) {
    // 在此处编写处理子元素点击事件的代码
  }
});

在上述示例中，我们给父元素添加了一个点击事件监听器，并在监听器内部判断点击的是哪个子元素，然后进行相应的处理。这样即使动态添加了新的子元素，也能自动绑定监听事件，无需为每个子元素都单独添加监听器。