11-事件

18.10　事件

DOM API中包含了大约200个事件，而每个浏览器还实现了各自的非标准事件，因此，本书不会介绍所有事件，只会涵盖那些你需要知道的事件。从一个很容易理解的事件开始：点击事件（ click ）。下面会通过click事件将“highlight”button跟 highlightParas 函数绑定起来：

const highlightActions = document.querySelectorAll('[data-action= 
"highlight"]');
for(let a of highlightActions) {
    a.addEventListener('click', evt => {
        evt.preventDefault();
        highlightParas(a.dataset.containing);
    }); 
} 
const removeHighlightActions =
    document.querySelectorAll('[data-action="removeHighlights"]');
for(let a of removeHighlightActions) {
    a.addEventListener('click', evt => {
        evt.preventDefault();
        removeParaHighlights();
    });
} 

每个元素都有一个叫作 addEventListener 的方法，它允许事件发生时指定调用方法。这个函数只接受一个参数：一个Event类型的对象。event对象中包含了所有关于这个事件的信息，而不同类型的事件将会有不同类型的信息。比如，click事件包含 clientX 和 clientY 属性，它们可以提供点击事件发生时的坐标。另外， target 属性代表触发点击事件的元素。

事件模型是为了让多个处理器同时处理一个事件而设计的。很多事件都有默认处理器。比如，如果用户点击一个链接，浏览器通过加载链接中请求的页面来处理这个事件。如果想阻止这个默认的处理事件，可以在event对象上调用 preventDefault() 。开发人员编写的大部分事件处理器都会调用 preventDefault() 方法（除非明确知道自己想在默认处理器的基础上做一些额外处理）。