H5-Chapter5-事件

本章附件：chapter5 事件

事件

• 注册事件处理程序与取消事件处理程序

1. 注册html事件：

<tag  on事件名=”javascript代码|函数调用”>

2. DOM事件

注册：

对象.on事件名= ”函数名|匿名函数|箭头函数”

对象.addEventListener(“事件名”,“函数名|匿名函数|箭头函数”)

DOM事件除了event对象外，无法传额外的参数。

取消：

对象.on事件名=null

对象.removeEventListener(“事件名”，“函数名”)

• 事件对象event

无论html事件还是DOM事件，在事件处理程序中都有一个事件对象，该对象具有与事件类型相关的属性。其公共属性和方法如下：

type：事件的类型

target：触发事件的元素

currentTarget：当前事件处理程序所在的元素

cancelable：是否可以取消事件的默认行为

preventDefault( )：取消事件的默认行为。只有cancelable属性为true的元素才可以调用该方法

bubbles：表示事件是否冒泡

stopPropagation( )：阻止事件冒泡。只有cancelable属性为true的事件才可以调用该方法

html事件处理程序可以传参数，而DOM事件处理程序除了event对象外，无法传递其它参数。

• 冒泡

• 焦点事件

focus：元素获得焦点时触发

blur：元素失去焦点时触发

• 鼠标事件

事件         触发条件            event上的附加属性

mousedown   左键、中键、右键      button：0左键、1中键、2右键

mouseup     左键、中键、右键      button：0左键、1中键、2右键

click          左键                 altKey、ctrlKey、shiftKey、clientX、clientY

pageX、pageY、screenX、screenY

dbclick       左键

mouseover

mouseout

contextmenu

• 键盘事件

事件          触发条件             event上的附加属性

keydown     按键盘上某个键时     keyCode：按键的键码，Number类型

keypress      按键产生字符输出时   keyCode：按键的键码，Number类型

keyup        释放键盘时           keyCode：按键的键码，Number类型

textInput      同keypress          data：按键的字符，String类型

对于keydown和keypress 事件，event.keyCode不区分大小写字母，始终返回大写字母的键码，而keypress事件和textInput事件区分大小写字母。

对于可输出字符，keypress事件和textInput事件在字符插入之前触发。因此，可以在事件处理程序中进行验证，阻止非法字符输入。