您的位置:知识库 » Web前端

从零开始学习jQuery (五) 事件与事件对象

作者: ziqiu.zhang  来源: 博客园  发布时间: 2009-05-08 11:25  阅读: 19685 次  推荐: 5   原文链接   [收藏]  
摘要:事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解.
[1] 事件与事件对象
[2] jQuery中的事件
[3] 常用事件函数举例
[4] 快捷事件 Event Helpers
[5] 交互帮助方法

系列文章导航:

从零开始学习jQuery (一) 开天辟地入门篇

从零开始学习jQuery (二) 万能的选择器

从零开始学习jQuery (三) 管理jQuery包装集

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (五) 事件与事件对象

从零开始学习jQuery (六) AJAX快餐

从零开始学习jQuery (七) jQuery动画-让页面动起来!

从零开始学习jQuery (九) jQuery工具函数

从零开始学习jQuery (十) jQueryUI常用功能实战

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件


五.常用事件函数举例

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后将显示:

方法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/xht
ml1/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元素没有获得焦点.

5
0
 

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻