学习笔记 2020-11-18

JavaScript 高级程序设计(第4版) 阅读记录

事件

事件类型

鼠标和滚轮事件

1. 相关元素

   event.relatedTarget，mouseover 时，主要目标是获得光标的元素，相关元素是失去光标的元素，mouseout 类似。

   IE8 及更早版本提供 fromElement 和 toElement 来替代。

2. 鼠标按键

   event.button

   • 0 主键
   • 1 中键
   • 2 副键

   IE8 及更早版本：

   • 0 没有按下任何键
   • 1 主键
   • 2 副键
   • 3 同时主键、副键
   • 4 中键
   • 5 同时主键、中键
   • 6 同时副键、中键
   • 7 同时 3 个键

3. 额外事件信息

   event.detail

   • 鼠标事件中，值为给定位置发生单击的次数。

   IE 还提供了：

   • altLeft，是否按下，下同。
   • ctrlLeft
   • offsetX，光标相对于目标元素边界的 X 坐标。
   • offsetY
   • shiftLeft

4. mousewheel 事件

   该事件在任何元素上触发，并冒泡到 document ( IE8 ) 和 window 。

   event.wheelDelta

5. 触摸屏设备

   • 不支持 dbclick。
   • 单指点击可点击元素触发 mousemove。如果屏幕没有变化，相继触发 mousedown、mouseup 和 click 事件。
   • mousemove 也会触发 mouseover 和 mouseout。
   • 双指点触并滑动会触发 mousewheel 和 scroll 。

6. 无障碍问题

键盘与输入事件

• keydown，按下触发，持续按住重复触发。
• keypress，同样重复触发。
• keyup
• textInput，在文本被插入到文本框之前触发。

触发顺序：keydown -> keypress -> keyup

1. 键码

   event.keyCode

2. 字符编码

   event.charCode，只会在 keypress 事件被设置。

3. DOM3 的变化

   • event.key || event.keyIdentifier
   • event.char
   • event.location
     • 0 默认
     • 1 左边
     • 2 右边
     • 3 数字键盘
     • 4 移动设备
     • 5 游戏手柄
   • event.getModifierState()

4. textInput 事件

   • event.data
   • event.inputMethod

5. 设备上的键盘事件

合成事件

• compositionstart
• compositionupdate
• compositionend

变化事件

HTML5 事件

1. contextmenu 事件
2. beforeunload 事件