jQuery 教程 (五) 事件与事件对象2 .NET

来源：互联网发布：手机绘画软件推荐编辑：程序博客网时间：2024/06/06 00:34

五.常用事件函数举例

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 id="testDiv5" customer="customer data 1">获取自定义数据-1</div>

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

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

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

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

<div id="testDiv6">获取自定义数据-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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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").html("");                $("input").trigger("focus");            });            $("#new").click(function()            {                $("#divResult").html("");                $("input").triggerHandler("focus");            });            $("input").focus(function() { $("<span>Focused!</span>").appendTo("#divResult"); });        })            </script></head><body>    <button id="old">        .trigger("focus")</button>    <button id="new">        .triggerHandler("focus")</button><br />    <br />    <input type="text" value="To Be Focused" />    <div id="divResult"></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 )