常用事件与jQuery事件方法

常用事件与jQuery事件方法

鼠标事件

• click: 鼠标左键单击触发
• dblclick: 鼠标左键双击触发
• mouseenter: 鼠标移入元素范围内触发
• mouseleave: 鼠标移出元素范围内触发
• mouseover: 鼠标移动到元素上（包括从子元素上移动回来）触发
• mousemove: 鼠标在元素上移动触发
• mouseout: 鼠标离开元素（包括移动到子元素上）触发
• mousedown: 鼠标键按下触发
• mouseup: 鼠标键松开触发
• hover: 鼠标悬浮（移入，移出）触发（传递2个事件处理函数）

  $('a').hover(function() {
      console.log('来');
  }, function() {
      console.log('去');
  });
  

键盘事件

• keypress: 键盘按下并弹起后触发
• keydown: 键盘按下后触发
• keyup: 键盘弹起后触发

表单(元素)事件

• submit: 表单提交前触发（可阻止提交）
• change: 表单元素内容改变触发
  • 文本框输入变化监听，失去焦点时才会触发
• focus: 元素获得焦点触发
• blur: 元素失去焦点触发

文档/窗口事件

• resize: 浏览器窗口大小改变触发

  $(window).resize(function(event) {
      var win_w = $(window).width();
      var win_h = $(window).height();
      console.log('window(w,h):', win_w, win_h);
  });
  

• scroll: 有滚动条的元素或文档滚动触发

  $(window).scroll(function(event) {
      var scroll_left = $(window).scrollLeft();
      var scroll_top = $(window).scrollTop();
      console.log('scroll(x,y):', scroll_left, scroll_top);
  });
  

• ready: 页面资源加载完成触发

其他事件

• contextmenu: 右键（鼠标触发，或存在焦点时，键盘触发）触发

  $(document.body).contextmenu(function(event) {
      event.preventDefault();
      console.log('阻止了右键菜单');
  });
  

---

jQuery事件绑定/解绑/触发定函数

• on(event_name[[, limit_selector], handle_func]): 绑定事件处理程序（可多次触发）
  • 绑定多个事件监听时，多个事件名使用空格分隔
  • 文本框输入变化（不失去焦点）监听

    $('input[type="text"]').on('input propertychange', function() {
        var $self = $(this);
        console.log($self.val());
    });
    

• one(event_name[, handle_func]): 绑定事件处理程序（只会触发一次）
• off([event_name[, handle_func]]): 移除事件
• trigger(event_name[, *args]): 触发事件

事件对象-方法、属性

• target: 获取触发事件的元素（DOM对象）
• stopPropagation(): 阻止事件冒泡
• preventDefault(): 阻止默认行为

---

特别说明

• 事件触发时，所有的事件处理函数的第一个参数，是event, 由浏览器自动传递
• event对象的target属性，是触发事件的DOM元素
  • DOM元素转成jQuery对象

    var $elem = $(event.target);
    

• 事件处理函数中, this是事件的绑定者(DOM元素)
  • DOM元素转成jQuery对象

    var $self = $(this);
    

• 鼠标事件，event对象属性
  • pageX、pageY: 相对于文档（页面左上角）
  • clientX、clientY: 相对于浏览器视口（浏览器可视区域左上角）
  • screenX、screenY: 相对于屏幕（屏幕左上角）
  • offsetX、offsetX：相对于元素（元素左上角）（如果元素有border, 可能为负数）

  $('#page').mousemove(function(event) {
      console.log('page(x, y): ', event.pageX, event.pageY);
      console.log('client(x, y): ', event.clientX, event.clientY);
      console.log('screen(x, y): ', event.screenX, event.screenY);
      console.log('offset(x, y): ', event.offsetX, event.offsetY);
      console.log('----------------------------');
  });
  

• 键盘事件，event对象属性
  • shiftKey: 是否按下了Shift键（true或false）
  • altKey: 是否按下了Alt键（true或false）
  • ctrlKey: 是否按下了Ctrl键（true或false）
  • metaKey: 是否按下了Meta键(Windows上是徽标键，Mac上的Command键)（true或false）
  • key: 按下的键的名称（字符串）
  • keyCode、which: 按下的键的键盘码（整数）
    • 特殊键盘码：
      • 8: 退格（Backspace）
      • 9: Tab
      • 13: 回车
      • 27: ESC
      • 32: 空格
      • 33: 翻页-上
      • 34: 翻页-下
      • 35: End
      • 36: Home
      • 37: 方向-左
      • 38: 方向-上
      • 39: 方向-右
      • 40: 方向-下
      • 46: 删除（Delete）
      • 122: F11
      • 123: F12