jQuery 事件

建议学习时长： 60分钟
学习方式：深入

学习目标

• 知道常见的事件有哪些
• 知道如何绑定和解除绑定事件
• 知道什么是事件委托，以及事件委托怎么写
• 知道如何组织事件冒泡和默认行为

详细介绍

绑定事件处理函数

通用写法

$elem.on(事件名称, 事件处理函数)

简写

$elem.事件名(事件处理函数)

支持简写的事件有：

• click
• dblclick
• change
• hover
• keyup
• keydown
• keypress
• focus
• blur
• ...

事件委托

$par.on(事件名称, 委托元素, 事件处理函数)

解绑事件

解除某类型事件的所有事件处理函数

$elem.off(事件名称)

解除某类型事件的某个事件处理函数

$elem.off(事件名称, 要解除的事件处理函数)

脚本触发事件

$elem.trigger(事件名称)

事件对象上的常用属性

• target
• currentTarget
• relatedTarget
• pageX
• pageY
• which 按下的键值
• metaKey meta键是否被按下，在 Window 指 Windows key，在 Mac 上指 Command Key

阻止事件冒泡

event.stopPropagation();

阻止元素的默认行为

event.preventDefault();

元素的默认行为，如

• 点击a元素跳转页面
• 右击元素出现上下文菜单
• 点击表单的提交按钮会提交表单

return false

在 jQuery 中，若在事件处理函数中 return false，则会阻止事件冒泡和阻止默认行为。

注:如果不用 jQuery，在事件处理函数中 return false 与写法有关。如

elem.onclick = function(event){
    return false;// 相当与 event.preventDefault()
};

elem.addEventListener(
    'click',
    function(event){
        return false;// 什么都不做。
    },
    false
);

总结

考虑到可读性以及歧义性。尽量不要用 return false。

鼠标右击事件

方法1:

$elem.bind("contextmenu",function(evt){// 事件处理函数});

方法2:

$elem.mousedown(function(event) {
  switch (event.which) {
    case 1: /* 左击 */; break;
    case 2: /* 点滑轮 */; break;
    case 3: /* 右击 */; break;
  }
});

图片加载失败

$( "img" )
  .error(function() {
    $( this ).attr( "src", "replacement.png" );
  })