从零开始学习jQuery (五) jquery事件与事件对象(2)_H5之家

　　$("p").click( function (event, a, b) {
// 一个普通的点击事件时，a和b是undefined类型
// 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

triggerHandler( event, [data] ) 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作. 如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作:

　　$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){ $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });

unbind( type, fn ) bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

　　如果没有参数，则删除所有绑定的事件。

　　你可以将你用bind()注册的自定义事件取消绑定。

　　如果提供了事件类型作为参数，则只删除该类型的绑定事件。

　　如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

把所有段落的所有事件取消绑定:
$("p").unbind()

将段落的click事件取消绑定:
$("p").unbind( "click" )

删除特定函数的绑定，将函数作为第二个参数传入:

　　var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo

五.常用事件函数举例 1.bind( type, [data], fn ) 函数举例

　　bind()是最常使用的函数, 注意方法签名上data参数, 可以在事件处理之前传递一些附加的数据:

　　function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)

　　注意event参数的使用. jQuery中统一了事件对象, 将事件对象作为事件处理函数的唯一参数传递.

　　data参数我们也要通过event.data 进行访问. 为何要提供data参数呢?

　　因为我们经常碰到这样的问题: 希望在事件处理中根据事件源的某些数据进行特殊处理.

　　目前网上有两种存在争议的解决方法:

　　(1) 使用自定义元素属性存储数据.

　　比如:

　　<div customer="customer data 1">获取自定义数据-1</div>

　　在事件处理函数中获取数据:

　　$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });

　　attr函数是上一讲中的知识, 用于获取元素的"元素属性", 而且可以获取自定义的元素属性. 单击div后将显示:

　　(2) 使用脚本将数据传递给事件处理函数:

　　<div>获取自定义数据-2</div>

　　元素没有任何的自定义属性, 添加事件处理函数时将额外的数据传递:

　　$("#testDiv6").bind("click", { customer: "customer data 2" }, function(event) { alert(event.data.customer) });

　　点击div后的结果和方法1相同:

　　方法1便于存储和查找数据. 但是自定义属性通过不W3C验证.

　　方法2必须要自己想办法存储数据, 并且要制定规则查找指定元素的数据.

　　从"开发人员"的角度方法1要更加简单直观. 但是缺点比较严重. 所以如何取舍请大家自己决定.

　　one( type, [data], fn ) 函数和bind一样, 但是只执行一次.

2. trigger( event, [data] ) 和 triggerHandler( event, [data] )

　　虽然为元素绑定了某些事件, 比如click, 但是有时希望在程序中触发这些事件, 这两个函数可以实现此功能.

　　主要区别是trigger会出发浏览器默认的动作, 而triggerHandler不会出发.

　　通过下面的实例可以明确的区分这两个函数:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>jQuery事件处理:trigger和triggerHandler示例</title> <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script> <script type="text/javascript"> $(function() { $("#old").click(function() { $("#divResult"l(""); $("input").trigger("focus"); }); $("#new").click(function() { $("#divResult"l(""); $("input").triggerHandler("focus"); }); $("input").focus(function() { $("<span>Focused!</span>").appendTo("#divResult"); }); }) </script> </head> <body> <button> .trigger("focus")</button> <button> .triggerHandler("focus")</button><br /> <br /> <input type="text" value="To Be Focused" /> <div></div> </body> </html>

　　当单击".trigger"按钮时, 会调用两次Focesed, 并且input元素获得了焦点:

　　单击".triggerHandler"按钮时, 只调用一次,并且input元素没有获得焦点:

　　也就是说, trigger函数出发了浏览器默认的获取焦点的行为,让input元素获得了焦点, 所以再次调用了focus事件处理函数.

　　triggerHandler只调用为focus事件绑定的事件处理函数, 而不引发浏览器行为, 所以最后input元素没有获得焦点.

六.快捷事件 Event Helpers

　　BUG提示:jquery-1.3.2-vsdoc2.js 这个最新的官方带智能提示的类库, 无法使用快捷事件, 比如click(), focus(). 使用其他版本的类库则没有问题.

　　虽然我们可以使用事件处理函数完成对象事件的几乎所有操作, 但是jQuery提供了对常用事件的封装. 比如单击事件对应的两个方法click()和click(fn)分别用来触发单击事件和设置单击事件.

　　设置单击事件:

　　$("#testDiv").click(function(event) { alert("test div clicked ! "); });

　　等效于:

　　$("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });

　　触发单击事件:

　　$("#testDiv").click();

　　等效于

　　$("#testDiv").trigger("click");

　　注意这里等效的是trigger而不是triggerHandler.

　　此类方法在jQuery中英文叫做Event Helpers, 我找不到很好的翻译方式, 所以按照功能称其为"快捷方法", 征集好的翻译名称!

　　下面是jQuery的快捷方法列表:

　　由于都是都是对应的事件, 所以不再写说明和举例了.

名称说明举例

blur( )

blur( fn )

change( )

change( fn )

click( )

click( fn )

dblclick( )

dblclick( fn )

error( )

error( fn )

focus( )

focus( fn )

keydown( )

keydown( fn )

keypress( )

keypress( fn )

keyup( )

keyup( fn )

load( fn )

mousedown( fn )

mouseenter( fn )

mouseleave( fn )

mousemove( fn )

mouseout( fn )

mouseover( fn )

mouseup( fn )

resize( fn )

scroll( fn )

select( )

select( fn )

submit( )

submit( fn )

unload( fn )

七. 交互帮助方法

　　除了基本的实践, jQuery提供了两个和事件相关的帮助方法: hover( over, out ) 和 toggle( fn, fn2, fn3,fn4,... )

1. hover( over, out )

　　hover函数主要解决在原始javascript中mouseover和mouseout函数存在的问题, 看下面这个示例:

　　有两个div(红色区域), 里面分别嵌套了一个div(黄色区域). HTML代码如下:

　　<div> Outer 1 <div>Inner 1</div> </div> <div> Outer 2 <div>Inner 2</div> </div> <div></div>

　　绑定如下事件: