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