js如何实现事件绑定- 技术经验 -卓越飞翔博客

javascript提供多种事件监听器绑定方式：html事件属性addeventlistener()方法事件代理domcontentloaded事件window.onload事件

js如何实现事件绑定

JavaScript事件绑定

JavaScript提供了多种方法来绑定事件监听器，以响应特定事件（例如单击、悬停或键盘输入）时执行某些操作。最常用的方法有：

1. HTML事件属性

这种方法直接在HTML元素的事件属性中设置事件处理函数。例如：

<button onclick="alert('按钮被点击了！')">点我</button>

2. addEventListener() 方法

更为灵活的方法是使用 addEventListener() 方法。该方法带三个参数：

事件类型（例如 "click" 或 "mouseover"）
事件处理函数
是否在捕获阶段还是冒泡阶段处理事件（可选）

例如：

const button = document.querySelector('button');
button.addEventListener('click', () =&gt; {
  alert('按钮被点击了！');
});

3. 事件代理

当你想为大量元素绑定相同的事件处理程序时，事件代理可以提高效率。通过将事件处理程序绑定到父元素，可以避免为每个子元素单独绑定。例如：

const container = document.getElementById('container');
container.addEventListener('click', (event) =&gt; {
  const target = event.target;
  if (target.tagName === 'BUTTON') {
    alert('按钮被点击了！');
  }
});

4. DOMContentLoaded 事件

当整个文档加载完毕（包括解析、编译和执行脚本）时触发 DOMContentLoaded 事件。这可以用于在页面加载后立即执行代码，例如绑定事件处理程序。

document.addEventListener('DOMContentLoaded', () =&gt; {
  // 在这里绑定事件处理程序
});

5. window.onload 事件

window.onload 事件在整个页面（包括外部资源）加载完成后触发。它不太常用，因为在 DOM 加载完毕之前就触发，导致在早期阶段无法访问 DOM 元素。

window.onload = () =&gt; {
  // 在这里绑定事件处理程序
};

相关推荐