JavaScript 事件参考手册

JavaScript 事件参考手册是一份非常全面的参考资料，详细列出了所有 DOM 事件及其相关属性和方法。为了更好地使用和掌握这份参考手册，可以按照以下攻略进行。

1. 浏览事件列表

首先浏览事件列表，了解所有可用的 DOM 事件。事件按照字母顺序排列，可以用浏览器的搜索功能查找特定的事件。每个事件名称后都有一个括号，里面包含了该事件所在的接口名称，这些接口名称可以帮助我们更好地理解这些事件是如何被触发的。

2. 了解事件对象

每个 DOM 事件都会生成一个事件对象，该对象包含了关于事件的所有信息。在 JavaScript 中，可以通过事件处理程序的参数来访问事件对象。事件对象有许多属性和方法，包括事件的类型、目标元素、鼠标位置、按键状态等信息。通过深入了解事件对象的属性和方法，可以更好地了解和掌握每个事件。

示例1：以下代码展示了如何通过事件对象获取鼠标位置：

document.addEventListener('mousemove', function(event) {
  console.log('X坐标：' + event.clientX);
  console.log('Y坐标：' + event.clientY);
});

示例2：以下代码展示了如何通过事件对象取消默认行为：

document.addEventListener('click', function(event) {
  event.preventDefault();
});

3. 使用事件委托

事件委托是一种常用的技术，可以减少事件处理程序的数量，提高代码效率。它利用事件冒泡的特性来将事件处理程序添加到父元素上，而不是为每个子元素都添加一个事件处理程序。通过了解事件委托的原理和实现方式，可以更好地利用 DOM 事件。

示例3：以下代码展示了如何使用事件委托来处理点击事件：

var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('done');
  }
});

以上攻略适用于初学者和进阶者。初学者可以先浏览事件列表，了解事件的种类和应用场景；了解事件对象后，掌握如何通过事件对象操作页面元素；最后学习如何使用事件委托来提高代码效率。进阶者可以深入研究每个事件的详细属性和方法，了解更高级的应用和技巧。