使用 jQuery 处理事件
jQuery 定义了一个统一的事件 API，可以在所有浏览器中使用。
事件处理程序的简单注册
xxxxxxxxxx$("p").click(function() { $(this).css("background-color", "gray"); });还可以通过这种初始化的方式注册：
xxxxxxxxxx$("<img/>", { src: image_url, alt: image_desc, className: "translucent_image", click: function() { $(this).css("display", "50%"); }});jQuery 事件处理程序
参数：事件对象
返回值：返回 false 会取消事件关联的默认行为及事件冒泡，返回非 undefined 值会存储到事件对象的 result 属性中供后续使用。
jQuery 事件对象
jQuery 通过定义自己的 Event 对象来消除浏览器之间的实现差异。
事件处理程序的高级注册
使用 bind() 方法可以让我们使用事件注册的高级特性。
简单调用：
xxxxxxxxxx$('a').bind('hover', f); // 等价于 $('a').click(f)支持传入第二个参数作为事件对象的 data 属性：
xxxxxxxxxx$('a').bind('hover', d, f);第一个参数可以是空格分隔的事件类型列表：
xxxxxxxxxx$('a').bind('mouseenter mouseleave', f); // 等价于 $('a').bind('hover', f);允许为注册的事件处理程序指定命名空间，方便后续卸载或触发指定命名空间的处理程序：
xxxxxxxxxx$('a').bind('mouseover.myMod', f);第一个参数还可以是对象：
xxxxxxxxxx$('a').bind({mouseenter:f, mouseleave:g}); // 等价于 $('a').hover(f, g)与 bind() 方法类似的还有一个 one() 方法，不同之处在于后者在调用事件处理程序只会会自动销毁，因此 one() 方法注册的事件处理程序永远只会触发一次。
注销事件处理程序
bind() 方法（或通过相关 jQuery 方法如 click、hover 等）注册事件处理程序之后，可以通过 unbind() 方法将其注销，不带参数 unbind() 方法会注销 jQuery 对象中所有元素的所有事件处理程序：
xxxxxxxxxx$("*").unbind();简单调用：
xxxxxxxxxx$("a").unbind("mouseover mouseout");通过命名空间调用：
xxxxxxxxxx$("a").unbind("mouseover.myMod");$("a").unbind(".myMod");注销指定事件处理函数（必须将事件处理程序函数赋值给一个变量引用）：
xxxxxxxxxx$("a").unbind("click", myClickHandler);还可以通过传入对象方式调用：
xxxxxxxxxx$("a").unbind({ mouseover: mouseoverHandler, mouseout: mouseoutHandler});最后，还可以将事件对象传递给 unbind() 方法，它会取消绑定传入事件的事件处理程序。
触发事件
手动触发：
xxxxxxxxxx$("#my_form").submit();submit() 方法会自己合成一个 Event 对象，并触发 submit 事件注册的事件处理程序。
注：通过
addEventListener()和attachEvent()注册的事件处理程序不能手动触发。
正如 jQuery 定义了一个更通用的 bind() 方法用来注册事件处理程序，jQuery 也定义了一个通用的 trigger() 方法来触发事件：
xxxxxxxxxx$("#my_form").trigger("submit");与 bind() 和 unbind() 方法不同，在传入的字符串中不能指定多个事件类型，但是支持命名空间：
xxxxxxxxxx$("#my_form").trigger("submit.myMod");trigger() 也支持传入 Event 对象（或带有 type 属性的对象）：
xxxxxxxxxx$("#button1").trigger({type: 'click', synthetic: true});$("#button1").click(function(e) { $("#button2").trigger(e); });trigger() 还支持传递额外数据：
xxxxxxxxxx$("#button1").trigger("click", [x, y, z]);如果想触发给定事件类型的所有事件处理程序，使用 jQuery.event.trigger() 效率更高。
如果想调用事件处理程序但不执行默认操作，可以使用 triggerHandler() 方法，该方法首先会调用 preventDefault() 和 cancelBubble() 方法。
实时事件
jQuery 使用「实时事件」来处理动态创建元素上绑定的事件处理程序。要使用实时事件，需要使用 delegate() 和 undelegate() 来替代 bind() 和 unbind()：
xxxxxxxxxx$(document).delegate("a", "mouseover", linkHandler);其原理是在 Document 或 Window 注册一个内部处理程序，当指定类型事件冒泡到该内部处理程序时，会判断事件目标是否匹配选择器字符串，如果匹配，则调用指定的处理程序函数。如果需要分开处理新老创建元素上的事件，需要这么做：
xxxxxxxxxx// 静态链接的静态事件处理程序$("a").bind("mouseover", linkHandler);// 动态更新部分使用实时事件处理程序$(".dynamic").delegate("a", "mouseover", linkHandler);综上所述，实时事件依赖事件冒泡。如果事件不支持冒泡或者冒泡过程中被取消，则实时事件处理程序将永远不会被调用。
jQuery 还定义了一个 live() 方法，用于注册实时事件：
xxxxxxxxxx$("a").live("mouseover", linkHandler);要注销实时事件处理程序，可以使用 die() 或 undelegate() 方法：
xxxxxxxxxx$("a").die("mouseover"); $("a").die("mouseover", linkHandler); $(document).undelegate(); // 移除委托的所有事件处理程序 $(document).undelegate("a"); $(document).undelegate("a", "mouseover"); $(document).undelegate("a", "mouseover", linkHandler);
No Comments