犀牛——第17章 事件处理

事件类型是一个用来说明发生什么类型事件的字符串。“mousemove”,"keydown","load"

事件目标是发生的事件或与之相关的对象。

事件处理程序或事件监听程序是处理或响应事件的函数。

事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类型的type属性和指定事件目标的target属性。

事件传播是浏览器决定哪个对象触发其事件处理程序的过程。

17.1 事件类型

17.1.1 传统事件类型

1.表单事件

2.Window事件

load事件：当文档和其所有外部资源完全加载并显示给用户时就会触发它。

unload事件：当用户离开当前文档转向其他文档时会触发它。beforeunload事件和unload事件类似，但它能提供询问用户是否正确离开当前页面的机会。

Window对象的onerror属性有点像事件处理程序，当JavaScript出错时会触发它。

调整浏览器窗口大小伙滚动它是会触发resize和scroll事件。

当用户调整浏览器窗口大小或滚动它时会触发resize和scroll事件。

3 鼠标事件

clientX和clientY属性指定了鼠标在窗口坐标中的位置，button和witch属性指定了按下的鼠标键是哪个。当键盘辅助键按下时，对于的属性altkey,ctrlKey,metaKe和shiftKey会设置为true.而对于click事件，detail属性指定了其是单击、双击还是三击。

4.键盘事件

17.1.2 DOM事件

17.1.3 HTML5事件

17.1.4 触摸屏和移动设备事件

17.2 注册时间处理程序

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

注册事件处理程序最简单的方式就是通过设置事件目标的属性为所需事件处理程序函数。

例子：

//设置Window对象的unload属性为一个函数

//该函数是事件处理程序：当文档加载完毕时调用它

window.onload = function(){

//查找一个<form>元素

var elt = document.getElementById("shipping_address");

//注册事件处理程序函数

//在表单提交之前调用它

elt.onsubmit = function(){return validate(this);}

}

17.2.2 设置HTML标签属性为事件处理程序

用于设置的文档元素事件处理程序属性（property）也能换成对于HTML标签的属性（attribute）。

例子： <button onclick="alert('Thank you');">点击这里</button>

17.2.3 addEventListener()

addEventListener()可以为事件目标注册事件处理程序。接收三个参数：

第一个是要注册处理程序的事件类型

第二个参数是当指定类型的事件发生时一个调用的函数。

最后一个参数是布尔值。通常情况下，会给这个参数传递false。如果相反传递了true，那么函数将注册为捕获事件处理程序，并在事件不同的调度阶段调用。

例子：

<button id="my button">click me</button>

<script>

var b = document.getElementById("mybutton");

b.onclick = function(){alert("Thanks for clicking me!");};

b.addEventListener("click",function(){alert("Thanks again!");},false);

</script>

removeEventListener()方法，同样有三个参数，从对象中删除事件处理程序函数而非添加，它常用于临时注册事件处理程序，然后不久就删除它。

document.removeEventListener("mousemove",handleMouseMove,true);

document.removeEventListener("mouseup",handleMouseUp,true);

17.2.4 attachEvent()

IE9之前的IE不支持addEventListener()和removeEventListener()。IE5及以后版本定义了类似的方法attachEvent()和detachEvent()。

17.3 事件处理程序的调用

17.3.1 事件处理程序的函数

17.3.2 事件处理程序的运行环境