JavaScript事件

概述

JavaScript与HTML之间的交互通过事件实现。事件，就是文档或者浏览器窗口中发生的一些特定的交互瞬间.

事件流

当单击页面上的按钮时，你也单击了按钮的容器元素，甚至也单击了整个页面，那这几个元素的接收到事件的顺序是如何呢？
事件流就是指从页面中接收事件的顺序。事件流有以下两种：

事件冒泡

事件开始时从最具体的元素接收，然后逐级向上传播，也就是说如果点击一个元素，该元素的点击事件先发生再传播至上一级

事件捕获

事件从最不具体的元素开始，到你真正接收事件的节点逐级向下传播，也就是说点击一个元素，若document有点击事件，则先发生document事件，再发生至你点击的元素

DOM事件流

‘DOM2级事件’规定的事件流包括三个阶段：事件捕获、处于目标阶段和事件冒泡阶段。
先后顺序：
事件捕获，为截获事件提供机会-->实际的目标接收到事件-->事件冒泡，在这个阶段对事件做出响应。

事件处理程序

事件是用户或者浏览器自身执行的某种动作，那么事件处理程序就是响应某个事件的处理函数，事件处理程序的名字以‘on’开头

HTML事件处理程序

<input type="button" value="点击我" onclick="alert('我被点击了')">

DOM0级事件处理程序

var btn = document.querySelector('#clickMe')
btn.onclick = function() {
    alert('我被点击了')
}

DOM2级事件处理程序

btn.addEventListener('click', function() {
    alert('我被点击了')
}, true)

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListerner和removeEventListener，它们接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
最后这个布尔值参数如果是true，表示再捕获阶段就调用事件处理程序；如果是false，则是再冒泡阶段调用事件处理程序
好处：可以添加多个事件处理程序