鼠标、键盘事件
Contents
由于开发富文本中遇到中文输入法输入等问题，所以总结一下。
键盘事件
触发顺序
普通输入
keydown ->keypress -> input->change-> keyup
输入法输入
输入时
keydown ->CompositionStart->CompositionUpdate -> input->change->onCompositionEnd ->keyup
普通事件
在keyup 事件中无法阻止浏览器默认事件，如要阻止默认行为，必须在keydown或keypress时阻止。
| 事件名 | 触发时机 | 备注 |
|---|---|---|
keydown |
按下任意按键。 | |
keypress |
任意键被按住。 | 1.当按键处于按下状态时事件会持续触发。2. 按 Shift、Fn、CapsLock不能触发。3. 中文输入法中不会被触发 |
keyup |
释放任意按键。 |
输入框特殊事件
只会输入框中输入时触发。
| 事件名 | 触发时机 | 备注 |
|---|---|---|
compositionstar |
使用中文输入法，开始输入时 | 不用输入法不会触发 |
compositionend |
使用中文输入法，输入完成时 | 不用输入法不会触发 |
compositionupdate |
使用中文输入法，输入更新时 | 不用输入法不会触发 |
input |
当输入时 | |
change |
当值变化时 |
鼠标事件
| 事件类型 | 触发时机 | 备注 |
|---|---|---|
click |
单击鼠标左键，按键抬起后 | 如果左右键同时按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件 |
contextmenu |
单击鼠标右键，按键抬起后 | 如果左右键同时按下则不会发生。 |
dblclick |
双击鼠标左键时 | 如果右键也按下则不会发生。 |
mousedown |
鼠标左键或右键按下时 | |
mouseup |
鼠标左键或右键抬起后 | |
mouseover |
当鼠标移入元素或其子元素时 | 因为移动到子元素也会触发，所以会在元素里重复触发,是一个冒泡的过程。对应的移除事件是mouseout |
mouseout |
当鼠标离开元素或其子元素时 | 离开子元素也会触发 |
mouseenter |
当鼠标移入元素本身（不包含元素的子元素）时 | 不会冒泡，只会在元素里触发一次。对应的离开事件是mouseleave |
mouseleave |
当鼠标离开元素本身（不包含元素的子元素）时 | 离开子元素不会触发 |
mousemove |
鼠标移动时 | 会重复触发。 |