jQuery系列（四） -- 事件

鼠标事件

  1. .click() ==> 单击事件

  2. .dblclick() ==> 双击事件

  3. .mousedown() ==> 鼠标按键按下时触发

  4. .mouseup() ==> 鼠标按键释放时触发

  5. .mousemove() ==> 鼠标指针在元素内移动时触发

  6. .mouseover() ==> 当鼠标指针进入元素内触发（冒泡）

  7. .mouseout() ==> 当鼠标指针离开元素时触发（冒泡）

  8. .mouseenter() ==> 当鼠标移入到元素上时触发（不冒泡）

  9. .mouseleave() ==> 当鼠标离开元素上时触发（不冒泡）
    说明：.mouseenter() 和 .mouseleave() 事件只会在绑定它的元素上被调用，而不会在后代节点上触发

  10. .hover() ==> 将两个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。.hover() === .mouseenter() + .mouseleave()

  11. .focusin() ==> 元素获得焦点时触发

  12. focusout() ==> 元素失去焦点时触发

表单事件

  1. .focus() ==> 当元素获得焦点时

  2. .blur() ==> 当元素失去焦点时
    说明：.focus() 和 .blur() 不支持冒泡事件，只有绑定自身才有效；.focusin() 和 focusout() 支持冒泡事件

  3. .change() ==> 监听 <input>、<textarea> 和 <select> 元素值改变

  4. .select() ==> 当在元素中进行文本选择时，此事件只能用在 <input type="text"> 和 <textarea>

  5. .submit() ==> 监听表单提交事件

键盘事件

  1. .keydown() ==> 当在一个元素上第一次按下键盘上的键的时。每次获取的内容是之前输入的，当前输入的获取不到

  2. .keyup() ==> 当在一个元素上释放按键的时。获取的是触发键盘事件后的文本

  3. .keypress() ==> 当浏览器捕获一个元素上键盘输入时。只能捕获单个字符；无法相应系统功能键；不区分小键盘和主键盘的数字字符

说明：.keypress() 主要接收字母、数字等 ANSI 字符，而 .keydown() 和 .keyup() 事件过程可以处理任何不被 .keypress() 识别的击键

多事件

  1. .on() ==> 多事件绑定

    • 多个事件绑定同一函数
      $( 'ele' ).on( 'mouseover mouseout', () => {} )
    • 多个事件绑定不同函数 
      1
      2
      3
      4
      $( 'ele' ).on( {
          mouseover: () => {},
          mouseout: () => {}
      } )

  2. .off() ==> 移除绑定事件