JS笔记 ( 二十七 ) 事件分类 鼠标事件 键盘事件 文本操作事件 窗体操作事件

 
 

0. 事件

• 用户执行的每一个操作每一个动作都对应一种事件 ( 只要这种事件有定义 ),
  不论事件是否绑定了方法, 用户作出相应的动作, 事件都会被监听得到.

1. 鼠标事件

(1) 包括的事件

• click, mousedown, mousemove, mouseup, contextmenu
  mouseover, mouseout, mouseenter, mouseleave

(2) 事件作用

click 事件

• 鼠标点击时触发的事件, 相当于鼠标点下和鼠标松开事件的结合

mousedown 事件

• 鼠标按下时触发的事件

mouseup 事件

• 鼠标松开时触发的事件

mouseover, mouseenter 事件

• 都是同一事件, 后者是 h5 的写法
• 是鼠标进入目标元素区域时触发的事件

mouseout, mouseleave 事件

• 都是同一事件, 后者是 h5 的写法
• 是鼠标离开目标元素区域时触发的事件

mousemove 事件

• 鼠标移动时触发的事件

(3) 鼠标按键区分

键值

• 用 button 来区分鼠标的按键, 左键为 0, 中键滚轮为 1, 右键为 2.

备注

• DOM3 标准规定 click 事件只能监听得到左键,
  因此只能通过 mousedown 和 mouseup 来判断鼠标键位

区分鼠标左右键

• 区分鼠标左右键只有 mousedown 和 mouseup 事件可以区分
• 当这两个事件触发时, 事件对象 event 会将时间信息进行采集封装,
  在其对象内封装有 button 属性, button 属性值为 0 时, 就是左键触发事件,
  button 属性值为 2 时, 就是右键触发, button 属性值为 1 时, 是鼠标中间滚轮触发.

区分点击和长按

• 通过时间差去进行区分, 通过设置时间戳, 记录点下和松开的时间点, 用以算出时间差,
  先在 mousedown 事件中记录下鼠标键点下的那一刻的时间,
  再在 mouseup 事件中记录松开鼠标键松开的那一刻的时间,
  用变量接收算出来的时间差, 再设定一个定值用以作为点击和长按的区分标准,
  若时间差大于该定值, 就是鼠标长按, 反之就是鼠标点击.

 
 

2. 键盘事件

(1) 包括的事件

• keydown, keyup, keypress

(2) 顺序优先级

• keydown > keypress > keyup

(3) keydown 和 keypress 的区别

• keydown 可以响应任意键盘按键
• keypress 只能响应字符类键盘按键
• keypress 返回 ASCII 码, 可以转换成相应字符
   
• 只有 keypress 事件被触发时才会在事件对象中写入 charcode 属性的值,
  keydown 和 keyup 事件被触发时都不会写入 charcode 属性值, 默认都是为 0.
   
• 当点击的是非字符类按键时, 例如功能键 f1-12, keypress 事件并不会被触发
   
• keydown 和 keyup 会在事件对象中记录按下的是什么按钮, 记录对应的属性为 code 属性

 
 

3. 文本操作事件

(1) 包括的事件

• input, focus, blur, change

(2) 事件的作用

input 事件

• 若文本框绑定了该事件的功能, 但凡文本框内的内容出现变化, 都会触发该事件所对应的函数

change 事件

• 若文本框对该事件绑定了功能函数, 则当鼠标从文本框失去聚焦时, 即完成输入后点击其它地方时,
  事件会先对前后输入的值进行比较, 然后若文本前后发生变化, 则触发该事件绑定的功能函数.

focus 事件

• 鼠标聚焦事件, 当鼠标点击 / 聚焦于输入框内时, 触发该事件所绑定的功能函数

blur 事件

• 鼠标失去焦点事件, 当鼠标离开输入框, 点击其它地方时, 触发该事件所绑定的功能函数

4. 窗体操作事件

scroll 事件

• 当滚动条一滚动, 就触发事件

load 事件

• 整个页面完全被加载后, 这个事件才执行, 效率很低