17 事件

 

1 事件流

IE 的事件流叫做事件冒泡（event bubbling）。

如果你单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。

换句话说，在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。

 

“ DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

 

2 事件处理程序

事件就是用户或浏览器自身执行的某种动作。诸如 click、 load 和 mouseover，都是事件的名字。

而响应某个事件的函数就叫做事件处理程序。

事件处理程序的名字以"on"开头，因此click 事件的事件处理程序就是 onclick。

方式一： 

方式二：函数方式

创建的函数中有一个局部变量 event，也就是事件对象。

通过 event 变量，可以直接访问事件对象。

this 值等于事件的目标元素（下面这个例子是input元素节点）。

在 HTML 中指定事件处理程序有两个缺点。

 

3 DOM 0级

删除 DOM 0 级方法指定的事件处理程序。

 

4 DOM 2级

上面的代码为一个按钮添加了 onclick 事件处理程序，而且该事件会在冒泡阶段被触发（因为最后一个参数是 false）。

 

“DOM2 级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作： addEventListener()和 removeEventListener()。

所有 DOM 节点中都包含这两个方法，它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

使用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。

通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除；

注意：移除时传入的参数与添加处理程序时使用的参数必须相同。

 

5 事件对象

在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。

例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，

而键盘操作导致的事件对象中，会包含与按下的键有关的信息。

 

在事件处理程序内部，对象 this 始终等于 currentTarget 的值，而 target 则只包含事件的实际目标。

 

要阻止特定事件的默认行为，可以使用 preventDefault()方法。

只有 cancelable 属性设置为 true 的事件，才可以使用 preventDefault()来取消其默认行为。

stopPropagation()方法用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡。

事件对象的 eventPhase 属性，可以用来确定事件当前正位于事件流的哪个阶段。

只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event 对象就会被销毁。

 

6 自定义DOM事件

 

7 事件中的this，currentTarget，target

在事件处理程序内部，对象 this 始终等于 currentTarget 的值，而 target 则只包含事件的实际目标。

如果直接将事件处理程序指定给了目标元素，则 this、 currentTarget 和 target 包含相同的值。来看下面的例子。

 如果如果事件处理程序存在于按钮的父节点中（例如 document.body），那么这些值是不相同的。 

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件冒泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。