JavaScript提供多种事件监听器绑定方式：HTML事件属性addEventListener()方法事件代理DOMContentLoaded事件window.onload事件
JavaScript事件绑定
JavaScript提供了多种方法来绑定事件监听器，以响应特定事件（例如单击、悬停或键盘输入）时执行某些操作。最常用的方法有：
1. HTML事件属性
这种方法直接在HTML元素的事件属性中设置事件处理函数。例如：
2. addEventListener() 方法
更为灵活的方法是使用 addEventListener() 方法。该方法带三个参数：
- 事件类型（例如 "click" 或 "mouseover"）
- 事件处理函数
- 是否在捕获阶段还是冒泡阶段处理事件（可选）
例如：
云模块网站管理系统3.1.03
下载
云模块_YunMOK网站管理系统采用PHP+MYSQL为编程语言，搭载自主研发的模块化引擎驱动技术，实现可视化拖拽无技术创建并管理网站！如你所想，无限可能，支持创建任何网站：企业、商城、O2O、门户、论坛、人才等一块儿搞定！永久免费授权，包括商业用途； 默认内置三套免费模板。PC网站+手机网站+适配微信+文章管理+产品管理+SEO优化+组件扩展+NEW Login界面.....目测已经遥遥领先..
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('按钮被点击了！');
});3. 事件代理
当你想为大量元素绑定相同的事件处理程序时，事件代理可以提高效率。通过将事件处理程序绑定到父元素，可以避免为每个子元素单独绑定。例如：
const container = document.getElementById('container');
container.addEventListener('click', (event) => {
const target = event.target;
if (target.tagName === 'BUTTON') {
alert('按钮被点击了！');
}
});4. DOMContentLoaded 事件
当整个文档加载完毕（包括解析、编译和执行脚本）时触发 DOMContentLoaded 事件。这可以用于在页面加载后立即执行代码，例如绑定事件处理程序。
document.addEventListener('DOMContentLoaded', () => {
// 在这里绑定事件处理程序
});5. window.onload 事件
window.onload 事件在整个页面（包括外部资源）加载完成后触发。它不太常用，因为在 DOM 加载完毕之前就触发，导致在早期阶段无法访问 DOM 元素。
window.onload = () => {
// 在这里绑定事件处理程序
}; 
