使用 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);

Vote Vote Cancel Collect Collect Cancel

<< 上一篇: 修改文档结构

>> 下一篇: 动画效果