可以使用以下 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：在元素的值发生改变时触发。
示例：
<button id="myButton" onclick="alert('按钮被点击了！')">点击我</button>
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* 属性在某些情况下更简洁。
