JavaScript事件讲解

什么是JavaScript事件?

1.事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水，当我们与浏览器中Web页面
进行某些类型的交互时，事件就发生了。

2.事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键，
事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。

3.简单的说:事件是文档或浏览器中发生的特定交互瞬间！

事件流

事件流描述的是从页面中接受事件的顺序。
但有意思的是，IE和Netscape开发团队居然提出了两个截然相反的事件流概念。IE的事件流是事件冒泡流，
而Netscape的事件流是事件捕获流。

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点。

事件捕获

Netscape团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的DOM节点应该更早接收到事件，
而最具体的节点应该最后接收到事件。

事件冒泡和事件捕获关系图

DOM事件流

"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获，
为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应。
以前面的例子，则会按下图顺序触发事件。

DOM2级事件处理程序

1.DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。
所有DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名，做为事件处理程序的函数和一个布尔
值。最后这个参数如果是true,表示在捕获阶段调用事件处理程序；如果是fasle,表示在冒泡阶段调用事件处理程序。

2.使用DOM2级事件处理程序的主要好处是可以添加多个事件处理程序。事件处理程序会按照它们的顺序触发。通过
addEventListener()添加的时间处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加时使用的参数相
同。这也意味着通过addEventListener()添加的匿名函数将无法移除。 

3.注意：这里我们的第三个参数都是false,是在冒泡阶段添加的。大多数情况下，都是就事件处理程序添加到事件流的
冒泡阶段，这样可以最大限度的兼容各种浏览器。

addEventListener('dblclick',function(){alert('a')},false);

事件类型

1.onclick：在对象被点击时发生。
2.onresize：在窗口或框架被调整大小时发生
3.window.scrollBy:方法可把内容滚动指定的像素数。
4.window.scrollTo:方法可把内容滚动到指定的坐标。
5.ondblclick:事件会在对象被双击时发生。
6.onmouseover：事件会在鼠标指针移动到指定的对象上时发生。
7.onmouseout：事件会在鼠标指针移出指定的对象时发生。
8.onmousedown：事件会在鼠标按键被按下时发生。
9.onmouseup：事件会在鼠标按键被松开时发生。
10.onkeydown：事件会在用户按下一个键盘按键时发生。
11.onkeyup：事件会在键盘按键被松开时发生。
12.onkeypress:事件会在键盘按键被按下并释放一个键时发生。