怎么使用JavaScript操作DOM事件监听？-js教程-PHP中文网

怎么使用JavaScript操作DOM事件监听？

夢幻星辰

发布： 2025-09-16 23:17:01

原创

305人浏览过

答案：JavaScript通过addEventListener添加事件监听器，需指定目标元素、事件类型和回调函数，支持捕获与冒泡阶段，可使用removeEventListener移除具名函数监听器，利用事件委托提升性能，并通过stopPropagation阻止冒泡，结合兼容性封装和优化策略提升用户体验。

怎么使用javascript操作dom事件监听？

使用JavaScript操作DOM事件监听，简单来说，就是让网页元素在特定事件发生时，执行你预先设定的代码。比如，点击按钮弹出提示框，鼠标悬停图片放大等等，都是通过事件监听实现的。

addEventListener()方法是实现DOM事件监听的核心。

如何添加事件监听器？

要给一个元素添加事件监听器，你需要三个要素：目标元素、事件类型和回调函数。目标元素就是要监听的DOM元素，事件类型是触发监听的事件名称，比如"click"、"mouseover"等等，回调函数是事件发生时要执行的JavaScript函数。

举个例子，假设你有一个id为"myButton"的按钮，你想在点击它的时候弹出一个警告框：

立即学习“Java免费学习笔记（深入）”；

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  alert("按钮被点击了！");
});

登录后复制

这段代码首先获取了按钮元素，然后使用

addEventListener()

登录后复制

方法添加了一个点击事件监听器。当按钮被点击时，就会执行

alert("按钮被点击了！");

登录后复制

这行代码，弹出警告框。

addEventListener()的第三个参数，还可以是对象，这允许你更精细地控制事件监听的行为，比如使用

capture

登录后复制

选项来控制事件是在捕获阶段还是冒泡阶段触发。

常用的事件类型有哪些？

JavaScript提供了非常丰富的事件类型，涵盖了用户交互的方方面面。

鼠标事件:
```
click
```
登录后复制
,
```
dblclick
```
登录后复制
,
```
mousedown
```
登录后复制
,
```
mouseup
```
登录后复制
,
```
mouseover
```
登录后复制
,
```
mouseout
```
登录后复制
,
```
mousemove
```
登录后复制
键盘事件:
```
keydown
```
登录后复制
,
```
keyup
```
登录后复制
,
```
keypress
```
登录后复制
表单事件:
```
submit
```
登录后复制
,
```
focus
```
登录后复制
,
```
blur
```
登录后复制
,
```
change
```
登录后复制
,
```
input
```
登录后复制
文档/窗口事件:
```
load
```
登录后复制
,
```
unload
```
登录后复制
,
```
resize
```
登录后复制
,
```
scroll
```
登录后复制
触摸事件:
```
touchstart
```
登录后复制
,
```
touchmove
```
登录后复制
,
```
touchend
```
登录后复制
,
```
touchcancel
```
登录后复制
(移动端)

当然，还有很多其他的事件类型，可以根据具体的需求选择合适的事件。比如，想要监听input框内容的变化，可以使用

input

登录后复制

事件，想要在页面加载完成后执行一些代码，可以使用

load

登录后复制

事件。

如何移除事件监听器？

有时候，你可能需要移除已经添加的事件监听器。这时，可以使用

removeEventListener()

登录后复制

方法。这个方法需要传入与

addEventListener()

登录后复制

相同的参数：目标元素、事件类型和回调函数。

需要注意的是，

removeEventListener()

登录后复制

方法只能移除使用具名函数作为回调函数添加的监听器。如果使用匿名函数，就无法移除。

例如：

function handleClick() {
  alert("按钮再次被点击了！");
}

const button = document.getElementById("myButton");

button.addEventListener("click", handleClick);

// 稍后移除监听器
button.removeEventListener("click", handleClick);

登录后复制

在这个例子中，

handleClick

登录后复制

是一个具名函数，可以被

removeEventListener()

登录后复制

方法移除。

事件冒泡和事件捕获是什么？

事件冒泡和事件捕获是描述事件传播的两种机制。当一个元素上发生事件时，浏览器会按照一定的顺序触发事件监听器。

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

查看详情

事件冒泡: 事件从目标元素开始，逐级向上传播到文档根节点。也就是说，如果父元素和子元素都监听了同一个事件，子元素的事件处理函数会先执行，然后是父元素的。
事件捕获: 事件从文档根节点开始，逐级向下传播到目标元素。也就是说，如果父元素和子元素都监听了同一个事件，父元素的事件处理函数会先执行，然后是子元素的。

默认情况下，

addEventListener()

登录后复制

方法添加的事件监听器是在冒泡阶段触发的。如果想要在捕获阶段触发，可以将

addEventListener()

登录后复制

方法的第三个参数设置为

true

登录后复制

。

const parent = document.getElementById("parent");
const child = document.getElementById("child");

parent.addEventListener("click", function() {
  console.log("父元素被点击了 (冒泡)");
}, false);

child.addEventListener("click", function() {
  console.log("子元素被点击了 (冒泡)");
}, false);

parent.addEventListener("click", function() {
  console.log("父元素被点击了 (捕获)");
}, true);

child.addEventListener("click", function() {
  console.log("子元素被点击了 (捕获)");
}, true);

登录后复制

在这个例子中，点击子元素时，控制台会输出：

父元素被点击了 (捕获)
子元素被点击了 (捕获)
子元素被点击了 (冒泡)
父元素被点击了 (冒泡)

登录后复制

理解事件冒泡和事件捕获对于处理复杂的事件逻辑非常重要。

如何阻止事件冒泡？

有时候，你可能需要阻止事件冒泡，防止事件传播到父元素。可以使用

event.stopPropagation()

登录后复制

方法来实现。

const button = document.getElementById("myButton");

button.addEventListener("click", function(event) {
  alert("按钮被点击了！");
  event.stopPropagation(); // 阻止事件冒泡
});

document.body.addEventListener("click", function() {
  alert("body被点击了！");
});

登录后复制

在这个例子中，点击按钮时，只会弹出"按钮被点击了！"的警告框，而不会弹出"body被点击了！"的警告框，因为

event.stopPropagation()

登录后复制

方法阻止了事件冒泡到

body

登录后复制

元素。

如何进行事件委托？

事件委托是一种优化事件处理的技巧。它利用了事件冒泡的机制，将事件监听器添加到父元素上，而不是每个子元素上。这样可以减少事件监听器的数量，提高性能。

例如，假设你有一个包含很多列表项的

ul

登录后复制

元素，你想在点击每个列表项时执行一些操作。可以使用事件委托：

const ul = document.getElementById("myList");

ul.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("你点击了列表项：" + event.target.textContent);
  }
});

登录后复制

在这个例子中，我们将点击事件监听器添加到

ul

登录后复制

元素上。当点击列表项时，事件会冒泡到

ul

登录后复制

元素，然后我们通过

event.target

登录后复制

属性获取到被点击的元素，判断它是否是

LI

登录后复制

元素，如果是，则执行相应的操作。

事件委托的优点在于，即使动态添加新的列表项，也不需要重新添加事件监听器，因为监听器已经添加到父元素上了。

兼容性问题考虑

虽然

addEventListener

登录后复制

已经相当普及，但在一些老旧浏览器，特别是IE8及更早版本中，需要使用

attachEvent

登录后复制

和

detachEvent

登录后复制

方法。为了兼容所有浏览器，可以进行如下的封装：

function addEvent(element, event, callback) {
  if (element.addEventListener) {
    element.addEventListener(event, callback, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, callback);
  } else {
    element['on' + event] = callback;
  }
}

function removeEvent(element, event, callback) {
  if (element.removeEventListener) {
    element.removeEventListener(event, callback, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + event, callback);
  } else {
    element['on' + event] = null;
  }
}

// 使用示例
const button = document.getElementById("myButton");
function handleClick() {
  alert("按钮被点击了！");
}
addEvent(button, "click", handleClick);
removeEvent(button, "click", handleClick);

登录后复制

这段代码封装了

addEvent

登录后复制

和

removeEvent

登录后复制

函数，可以自动判断浏览器类型，选择合适的事件监听方法。

如何优化事件监听器的性能？

过度使用事件监听器可能会影响网页的性能。以下是一些优化事件监听器性能的技巧：

使用事件委托: 减少事件监听器的数量。
避免在滚动事件中执行耗时操作: 滚动事件会频繁触发，如果在滚动事件处理函数中执行耗时操作，会导致页面卡顿。可以使用
```
requestAnimationFrame
```
登录后复制
来优化滚动事件处理。
及时移除不再需要的事件监听器: 避免内存泄漏。
使用节流或防抖技术: 控制事件处理函数的执行频率。