js如何监听dom

可以使用以下 4 种方式监听 DOM 事件：addEventListener()：最通用，可监听所有事件类型，支持捕获和冒泡阶段监听。事件处理程序属性：如 onclick，用于监听某些常见事件，语法简洁。元素.on* 属性：与事件处理程序属性类似，但适用于任何事件类型。DOMContentLoaded 和 load 事件：用于监听 DOM 加载状态。

如何使用 JavaScript 监听 DOM 事件

JavaScript 提供了多种方式来监听 DOM 事件，这些事件可以由用户交互或 DOM 的状态变化触发。

1. addEventListener()

addEventListener() 是最通用的方法，它接受三个参数：

• event_type：要监听的事件类型，如 "click" 或 "load"。
• listener：一个函数，当事件发生时将被调用。
• useCapture（可选）：布尔值，表示是否在捕获阶段监听事件（true）或冒泡阶段监听事件（false）。

示例：

听脑AI

听脑AI语音，一款专注于音视频内容的工作学习助手，为用户提供便捷的音视频内容记录、整理与分析功能。

378

查看详情

<code class="javascript">document.getElementById("myButton").addEventListener("click", function() {
  alert("按钮被点击了！");
});</code>

2. 事件处理程序属性

对于某些常见事件，可以通过访问 DOM 元素的事件处理程序属性来设置事件监听器。

• onclick：在元素被点击时触发。
• onload：在元素加载时触发。
• onchange：在元素的值发生改变时触发。

示例：

<code class="javascript"><button id="myButton" onclick="alert('按钮被点击了！')">点击我</button></code>

3. 元素.on* 属性

元素.on* 属性也是设置事件监听器的另一种方式。它与事件处理程序属性类似，但它适用于任何事件类型。

示例：

<code class="javascript">var myButton = document.getElementById("myButton");
myButton.onclick = function() {
  alert("按钮被点击了！");
};</code>

4. DOMContentLoaded 和 load

DOMContentLoaded 和 load 事件用于监听 DOM 的加载状态。

• DOMContentLoaded：在 DOM 结构加载完毕后触发。
• load：在整个页面，包括所有资源（如图像和样式表），加载完毕后触发。

示例：

<code class="javascript">document.addEventListener("DOMContentLoaded", function() {
  // DOM 结构已加载
});

window.addEventListener("load", function() {
  // 整个页面已加载
});</code>

选择哪种方法监听 DOM 事件取决于具体情况和偏好。addEventListener() 最灵活，但事件处理程序属性和元素.on* 属性在某些情况下更简洁。

以上就是js如何监听dom的详细内容，更多请关注php中文网其它相关文章！