【JS】【客户端】事件处理

客户端JavaScript程序采用了异步事件驱动编程模型。

事件类型

传统事件类型

表单事件

• sumit事件
• reset事件

Window事件

Window事件是指事件的发生与浏览器窗口本身而非窗口中显示的任何特定文档内容相关。

• load事件 —— 当文档和其他所有外部资源完全加载并显示给用户时就会触发它
• unload事件 —— 和load相对，当用户离开文档转向其他文档时会触发
• beforeunload事件 —— 和unload类似，但它能提供询问用户是否确定离开当前页面的机会
• onerror事件
• resize()和scroll()事件 —— 当用户调整浏览器窗口大小或滚动时会触发

鼠标事件

当用户在文档上移动或单击鼠标时都会产生鼠标事件。

• mousemove事件 —— 用户每次移动或拖动鼠标时
• mousedown事件
• mouseup事件
• click事件 —— 
• mouseover事件 —— 当用户移动鼠标指针从而是它悬停到新元素上
• mouseout事件 —— 鼠标移动指针不在悬停在某个元素上时
• mousewheel事件 —— 当用户滚动鼠标滚轮时

键盘事件

• keydown事件
• keyup事件
• keypress事件 —— 在keydown和keyup之间会触发另外一个keypress事件。keypress是较高级的文本事件，其事件对象指定产生的字符而非按下的键

DOM事件

HTML5事件

触摸屏和移动设备事件

注册事件处理程序

设置JavaScript对象属性为事件处理程序

事件处理程序的属性的名字是由”on“后面跟着事件名组成： onclick, onchange, onload等。注意这些属性名是区分大小写，所有都是小写。

设置HTML标签属性为事件处理程序（少用）

属性值应该是JS代码字符串，这段代码应该是事件处理程序函数的主体，而非完整的函数声明。

例如：

<button οnclick="alert(’  sss‘);"></button>

如果包含多条语句，使用分号分隔这些语句或断开属性值使其跨多行。

addEventListener()

在除IE8之前版本外的所有浏览器都支持的标准事件模型中，任何能称为事件目标的对象 —— 这些对象包括Window对象，Document对象和所有文档元素 —— 都定义了一个名叫 addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。

addEventListener()接受三个参数：

• 第一个是要注册处理程序的事件类型，这个事件类型是字符串
• 第二个参数是指定类型的事件发生时应该调用的函数

• 最有一个参数是布尔值，通常，为false。如果传递了ture，那么函数将注册为捕获事件处理程序，并在事件不同的调度阶段调用

可以通过多次调用addEventListner()为同一个对象注册同一事件类型的多个处理程序函数。当对象上发生事件时，所有该事件类型的处理程序都会按照注册的顺序调用。

相对于addEventListener(0的是 removeEventListener()方法，它同样有三个参数。

attachEvent()

IE9之前的IE不支持addEventListener()和removeEventListener()。

事件处理程序的调用

事件处理程序的参数

通常调用事件处理程序时把事件对象作为它们的一个参数。

IE8及以前版本中，通过设置属性注册事件处理程序时，并未传递事件对象，取而代之，需要通过全局对象window.event来获得事件对象。

例如：

function handler(event){
    event = event || window.event;
    ... ...
}

事件处理程序的运行环境

当通过设置属性注册事件处理程序时，在事件处理程序内，this关键字指的是事件目标。

甚至当使用 addEventListener(0注册时，调用的处理程序使用事件目标作为它们的this值。

事件处理程序的返回值

通过设置对象属性或HTML属性注册事件处理程序的返回值有时是非常有意义的。通常，返回值 false 就是告诉浏览器不要执行这个事件相关的默认操作。

事件处理程序的返回值只对通过属性注册的处理程序才有意义。使用addEventListener()注册事件处理程序转而必须调用preventDefault()方法或设置事件对象的returnValue属性。

事件处理程序调用顺序/优先级

浏览器按照如下规则调用所有的事件处理程序：

• 通过设置对象属性或HTML属性注册的处理程序一直优先调用
• 使用addEventListener()注册的处理程序按照它们的注册顺序调用
• 使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序

事件传播/冒泡

当事件目标是WINDOW对象或其他一些单独对象时，浏览器简单地通过调用对象上适当的处理程序响应事件。

当事件目标是文档或文档元素时，情况比较复杂。

在调用在目标元素傻姑娘注册的事件处理函数后，大部分事件会”冒泡“到DOM树根。调用目标的父元素的事件处理程序，然后调用在目标的祖父元素上注册的事件处理程序。这会一直到Document对象，最后到达WINDOW对象。

事件冒泡为在大量单独文档元素上注册处理程序提供了替代方案，即在共同的祖先元素上注册一个处理程序处理所有的事件。

事件取消

取消事件的浏览器默认操作。