17. 事件处理
异步事件驱动编程模型
事件类型只是一个字符串如:‘mouseover’,‘keydown’之类的,事件处理程序是处理或响应事件的程序。事件对象是与特定事件相关且包含有关该事件详细的对象。所有事件对象都有'type属性'和'target属性'比如:键盘事件的相关对象会包含按下的键和辅助键的详细信息,鼠标事件会包含鼠标指针的坐标。事件传播是浏览器决定那个对象触发器事件处理程序的过程。冒泡和捕获。取消事件事件处理程序可以通过返回一个适当的值,调用事件对象的某个方法或设置事件对象的某个属性来阻止默认操作的发生。
17.1 事件类型
事件分类:依赖于设备的输入事件,独立于设备的输入事件,用户界面事件,状态变化事件,特定API事件,计时器和错误处理程序
17.1.1 传统事件类型
- 表单事件:
- <form>元素分别会触发submit事件和reset事件
- 按钮交互:触发click事件
- 输入文字,选择选项或者选择复选框触发change事件
- 文本输入域:只有用户和表单元素完成交互并通过tab键或单击的方式移动焦点到其他元素上是会触发change事件。
- 相应通过键盘改变焦点的表单元素再得到失去焦点的时候分别触发focus和blur事件不会冒泡(IE中用focusin和focusout事件代替冒泡)
- window事件
- load事件
- unload事件
- resize事件(他的事件对象没有调整大小的详细信息属性)
- scroll事件 (他的事件对象没有滚动的详细信息属性)
- 鼠标事件
- 点击事件:鼠标事件在所对应的最深嵌套的元素上触发,但他们会冒泡直到文档的最顶层。传递给鼠标事件处理程序的事件对象有属性,【当事件发生时鼠标的位置和按键状态,当时是否有辅助键按下,clientX和clientY属性指定了鼠标在窗口坐标中的位置,button和which属性指定了按下的鼠标键是哪个,click事件的detail属性指定了是单机还是双击三击】
- mousemove事件:用户移动或拖动鼠标时会触发。
- mousedown和mouseup事件,在这两个事件队列之后,会自动触发click事件
- dblclick事件:用户在相当短的时间内连续两次单击鼠标按键,跟在第二个click时间之后是dbclick事件。
- contextmenu事件:单击鼠标右键会显示上下文菜单,取消这个事件可以取消菜单的显示,这个事件也是或的鼠标右击通知的简单方法。
- mouseover和mouseleave事件:用户移动指针从而使他悬停到新元素上时和鼠标移动指针使他不再悬停在某个元素上时触发。(会冒泡)事件对象有relateTarget属性来指明这个过程中涉及到的其他元素。很不方便,因为要需要检查鼠标是否真的离开目标元素还是仅仅是从这个元素的一个子元素移动到另一个子元素。IE提供了这些事件的不冒泡版本,mouseenter和mouseleave事件。
- mousewheel事件:传递的对象属性指定滚动转动的大小和方向
- 键盘事件
- 传递的键盘事件处理程序的事件对象有keyCode字段,他指定按下和释放的键是哪一个。 键盘按下时altKey/ctrlKey/metaKey/shiftKey设置为true。
- keydown和keyup是低级键盘事件,再两个事件之间或触发keypress事件。keypress是高级文本事件,其事件对象指定产生的字符而非按下的字符。
17.1.2 DOM事件
17.1.3 HTML5事件
17.1.4 触摸屏和移动设备事件
17.2 注册事件处理程序
17.2.1 设置javascript对象属性为事件处理程序
window.onload = function(){}
事件处理程序属性的名字由"on"后面跟着事件名组成。缺点是最对于每种事件类型最多只有一个处理程序。
17.2.2 设置HTML标签属性为事件处理程序
<button onclick="alert('thankyou');">点击这里</button>
17.2.3 addEventListener()
接受三个参数:要注册的处理程序的事件类型 + 需要调用的函数 + 布尔值(false冒泡事件,true捕获事件)
moveEventListener()
17.2.4 attachEvent()
用于IE9之前的IE版本。(IE9之前的IE版本不支持addEventListener()。)
IE事件不支持事件捕获,只要求两个参数。
17.3 事件处理程序的调用
17.3.2 事件处理程序的运行环境
addEventLitener()在事件处理程序内,this关键字指的是事件目标。
addachEvent()注册的处理程序,他们的值是window全局对象