HTML 事件解说之二 Button Link CheckBox Select

前一篇说到了 tab 键和鼠标切换元素焦点的事件顺序，这个对所以元素都适用，在这里再强调下

 

tab 键：

{keydown(theTextbox - 9)} {keypress(theTextbox - 9)} {blur(theTextbox)} {focus(theTextbox1)} {select(theTextbox1)} {keyup(theTextbox1 - 9)}

 

鼠标：

{mouseout(theTextbox)} {mouseover(theTextbox1)} {mousedown(theTextbox1)} {blur(theTextbox)} {focus(theTextbox1)} {mouseup(theTextbox1)} {click(theTextbox1)}

 

另外还有一个事件mousemove， 顾名思义，被监听控件上的任何鼠标移动都会触发此事件，除非有特殊的需要，一般不建议使用此事件。

 

下面，我们来看看其它几种元素的事件触发顺序：

 

Button/Link

对于button, 我们多半关注的是鼠标事件，那么普通的一个鼠标单击触发的事件顺序是如下：

 

 {mouseover(theButton)} {mousedown(theButton)} {focus(theButton)} {mouseup(theButton)} {click(theButton)}

 

如果在 button 上实现了一些键盘事件，则也支持一个标准的键盘事件过程

{mouseover(theButton)} {keydown(theButton - 13)} {keypress(theButton - 13)} {click(theButton)} {keyup(theButton - 13)}

 

鼠标移出点击其它元素，则触发如下事件：

 {mouseout(theButton)} {blur(theButton)} 

 

Checkbox

鼠标的单击事件序列：

{mouseover(theRadio1)} {mousedown(theRadio1)} {focus(theRadio1)} {mouseup(theRadio1)} {click(theRadio1)} {change(theRadio1)} {mouseout(theRadio1)} {blur(theRadio1)} 

 

普通键将触发三个标准的键盘事件，对于回车键，有可能触发 form 的 submit 事件

 {keydown(theRadio2 - 13)} {keypress(theRadio2 - 13)} {click(theSubmit)} {submit} {keyup(theRadio2 - 13)}

 

鼠标移出点击其它元素，则触发如下事件：

{mouseout(theRadio2)} {blur(theRadio2)} 

 

Select

当我们从第二个元素选择到第三个元素时，触发的事件顺序为：

{mouseover(theSelect)} {mousedown(theSelect)} {focus(theSelect)} {mouseup(theSelect)} {click(theSelect)} {mouseout(theSelect)} {mouseover(option1)} {mouseover(theSelect)} {mouseout(option1)} {mouseout(theSelect)} {mouseover(option2)} {mouseover(theSelect)} {mouseout(option2)} {mouseout(theSelect)} {mouseover(option3)} {mouseover(theSelect)} {mousedown(option3)} {mousedown(theSelect)} {mouseup(option3)} {change(theSelect)} {mouseup(theSelect)} {click(option3)} {click(theSelect)} {mouseout(option3)} {mouseout(theSelect)} {blur(theSelect)} 

 

以上事件的操作步骤是：

1). 点击 select 控件，默认选择的是 option2

2). 鼠标移到 option3 时无意经过了 option1 和 option2

所以可以出去option1 和 option2 相关事件，得到一个最短的事件路径如下：

{mouseover(theSelect)} {mousedown(theSelect)} {focus(theSelect)} {mouseup(theSelect)} {click(theSelect)} {mouseout(theSelect)} {mouseover(option3)} {mouseover(theSelect)} {mousedown(option3)} {mousedown(theSelect)} {mouseup(option3)} {change(theSelect)} {mouseup(theSelect)} {click(option3)} {click(theSelect)} {mouseout(option3)} {mouseout(theSelect)} {blur(theSelect)} 

有意思的是在触发 option3 的 mouse 事件时，同时也触发了 select 的相同 mouse 事件。