如何使用 JavaScript 监听 DOM 事件
JavaScript 提供了多种方式来监听 DOM 事件，这些事件可以由用户交互或 DOM 的状态变化触发。
1. addEventListener()
addEventListener() 是最通用的方法，它接受三个参数：
event_type：要监听的事件类型，如 "click" 或 "load"。 listener：一个函数，当事件发生时将被调用。 useCapture（可选）：布尔值，表示是否在捕获阶段监听事件（true）或冒泡阶段监听事件（false）。示例：
1
2
3
document.getElementById("myButton").addEventListener("click", function() {
alert("按钮被点击了！");
});
2. 事件处理程序属性
对于某些常见事件，可以通过访问 DOM 元素的事件处理程序属性来设置事件监听器。
onclick：在元素被点击时触发。 onload：在元素加载时触发。 onchange：在元素的值发生改变时触发。示例：
1
<button id="myButton" onclick="alert(按钮被点击了！)">点击我</button>
3. 元素.on* 属性
元素.on* 属性也是设置事件监听器的另一种方式。它与事件处理程序属性类似，但它适用于任何事件类型。
示例：
1
2
3
4
var myButton = document.getElementById("myButton");
myButton.onclick = function() {
alert("按钮被点击了！");
};
DOMContentLoaded 和 load 事件用于监听 DOM 的加载状态。
DOMContentLoaded：在 DOM 结构加载完毕后触发。 load：在整个页面，包括所有资源（如图像和样式表），加载完毕后触发。示例：
1
2
3
4
5
6
7
document.addEventListener("DOMContentLoaded", function() {
// DOM 结构已加载
});
window.addEventListener("load", function() {
// 整个页面已加载
});
选择哪种方法监听 DOM 事件取决于具体情况和偏好。addEventListener() 最灵活，但事件处理程序属性和元素.on* 属性在某些情况下更简洁。
以上就是js如何监听dom的详细内容，更多请关注php中文网其它相关文章！