使用 jQuery 处理事件

jQuery 定义了一个统一的事件 API，可以在所有浏览器中使用。

事件处理程序的简单注册

$("p").click(function() { 
  $(this).css("background-color", "gray"); 
});

还可以通过这种初始化的方式注册：

$("<img/>", {
    src: image_url,
    alt: image_desc,
    className: "translucent_image",
    click: function() { 
      $(this).css("display", "50%"); 
    }
});

jQuery 事件处理程序

参数：事件对象 返回值：返回 false 会取消事件关联的默认行为及事件冒泡，返回非 undefined 值会存储到事件对象的 result 属性中供后续使用。

jQuery 事件对象

jQuery 通过定义自己的 Event 对象来消除浏览器之间的实现差异。

事件处理程序的高级注册

使用 bind() 方法可以让我们使用事件注册的高级特性。

简单调用：

$('a').bind('hover', f);  // 等价于 $('a').click(f)

支持传入第二个参数作为事件对象的 data 属性：

$('a').bind('hover', d, f);

第一个参数可以是空格分隔的事件类型列表：

$('a').bind('mouseenter mouseleave', f);  // 等价于 $('a').bind('hover', f);

允许为注册的事件处理程序指定命名空间，方便后续卸载或触发指定命名空间的处理程序：

$('a').bind('mouseover.myMod', f);

第一个参数还可以是对象：

$('a').bind({mouseenter:f, mouseleave:g});  // 等价于 $('a').hover(f, g)

与 bind() 方法类似的还有一个 one() 方法，不同之处在于后者在调用事件处理程序只会会自动销毁，因此 one() 方法注册的事件处理程序永远只会触发一次。

注销事件处理程序

bind() 方法（或通过相关 jQuery 方法如 click、hover 等）注册事件处理程序之后，可以通过 unbind() 方法将其注销，不带参数 unbind() 方法会注销 jQuery 对象中所有元素的所有事件处理程序：

$("*").unbind();

简单调用：

$("a").unbind("mouseover mouseout");

通过命名空间调用：

$("a").unbind("mouseover.myMod");
$("a").unbind(".myMod");

注销指定事件处理函数（必须将事件处理程序函数赋值给一个变量引用）：

$("a").unbind("click", myClickHandler);

还可以通过传入对象方式调用：

$("a").unbind({
    mouseover: mouseoverHandler,
    mouseout: mouseoutHandler
});

最后，还可以将事件对象传递给 unbind() 方法，它会取消绑定传入事件的事件处理程序。

触发事件

手动触发：

$("#my_form").submit();

submit() 方法会自己合成一个 Event 对象，并触发 submit 事件注册的事件处理程序。

注：通过 addEventListener() 和 attachEvent() 注册的事件处理程序不能手动触发。

正如 jQuery 定义了一个更通用的 bind() 方法用来注册事件处理程序，jQuery 也定义了一个通用的 trigger() 方法来触发事件：

$("#my_form").trigger("submit");

与 bind() 和 unbind() 方法不同，在传入的字符串中不能指定多个事件类型，但是支持命名空间：

$("#my_form").trigger("submit.myMod");

trigger() 也支持传入 Event 对象（或带有 type 属性的对象）：

$("#button1").trigger({type: 'click', synthetic: true});
$("#button1").click(function(e) { $("#button2").trigger(e); });

trigger() 还支持传递额外数据：

$("#button1").trigger("click", [x, y, z]);

如果想触发给定事件类型的所有事件处理程序，使用 jQuery.event.trigger() 效率更高。

如果想调用事件处理程序但不执行默认操作，可以使用 triggerHandler() 方法，该方法首先会调用 preventDefault() 和 cancelBubble() 方法。

实时事件

jQuery 使用「实时事件」来处理动态创建元素上绑定的事件处理程序。要使用实时事件，需要使用 delegate() 和 undelegate() 来替代 bind() 和 unbind()：

$(document).delegate("a", "mouseover", linkHandler);

其原理是在 Document 或 Window 注册一个内部处理程序，当指定类型事件冒泡到该内部处理程序时，会判断事件目标是否匹配选择器字符串，如果匹配，则调用指定的处理程序函数。如果需要分开处理新老创建元素上的事件，需要这么做：

// 静态链接的静态事件处理程序
$("a").bind("mouseover", linkHandler);
// 动态更新部分使用实时事件处理程序
$(".dynamic").delegate("a", "mouseover", linkHandler);

综上所述，实时事件依赖事件冒泡。如果事件不支持冒泡或者冒泡过程中被取消，则实时事件处理程序将永远不会被调用。

jQuery 还定义了一个 live() 方法，用于注册实时事件：

$("a").live("mouseover", linkHandler);

要注销实时事件处理程序，可以使用 die() 或 undelegate() 方法：

    $("a").die("mouseover");
    $("a").die("mouseover", linkHandler);
    
    $(document).undelegate();  // 移除委托的所有事件处理程序
    $(document).undelegate("a");
    $(document).undelegate("a", "mouseover");
    $(document).undelegate("a", "mouseover", linkHandler);