事件

事件三要素

• 事件类型，由浏览器预定义的行为，比如：click、mouseover、keydown 等
• 事件源，触发事件的元素，比如：按钮、链接、输入框等
• 事件处理程序，响应事件的函数，在事件发生时被调用

HTML属性直接绑定

不推荐，不安全且代码难以维护

<button id="myButton" onclick="alert('Hello!')">Click Me!</button>

<script src="./test.js"></script>

DOM属性绑定

// DOM属性绑定事件，按钮被点击时触发，弹出警告框
const btn = document.getElementById('myButton');
btn.onclick = function() {
    alert('你点击了按钮!');
};

addEventListener 推荐

const btn = document.getElementById('myButton');
btn.addEventListener('click', function (event) {

})
const btn = document.getElementById('myButton');
btn.addEventListener(
  'click',
  function(event) {
    console.log('事件类型：', event.type)
    console.log('目标元素：', event.target)
    console.log(`鼠标点击位置 (${event.clientX}, ${event.clientY})`)
    alert('Hello!');
  },
  false  // 可选参数，指定事件处理程序是在捕获阶段（true）还是冒泡阶段执行（false，默认）
);

事件监听

const btn = document.getElementById('myButton');
const sayHello = function() {
    alert('Hello!');
};

// 添加事件监听器
btn.addEventListener('click', sayHello, false);

// 移除事件监听器，防止内存泄漏
btn.removeEventListener('click', sayHello, false);

事件委托

事件有冒泡和捕获的特性，可以不直接监听实际的目标元素，而是监听其父元素

const ul = document.querySelector('ul')

ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    alert(`内容为 ${event.target.textContent} 的 li 被点击了！`)
  }
})

自定义事件

const customEvent = new CustomEvent('myEvent', {
  detail: { message: '这是一个自定义事件' },
})

document.addEventListener('myEvent', (event) => {
  console.log('自定义事件被触发了：', event.detail.message)
})

document.dispatchEvent(customEvent)  // 触发事件