事件与事件对象（二）

最新推荐文章于 2023-05-02 16:00:10 发布

ghycn

最新推荐文章于 2023-05-02 16:00:10 发布

阅读量499

点赞数

文章标签： jquery function input 浏览器 html 脚本

本文链接：https://blog.csdn.net/ghycn/article/details/5869545

版权

三、jQuery中的事件

有了jQuery, 我们有了处理对象事件的一系列函数. 上面基础知识还是要懂, 但是再也不用自己去实现处理多播事件委托的函数了. 正所谓有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法举例:

1 $("#testDiv4").bind("click", showMsg);

我们为id是testDiv4的元素, 添加列click事件的事件处理函数showMsg.

使用jQuery事件处理函数的好处:

1. 添加的是多播事件委托. 也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.

1 $("#testDiv4").bind("click", function(event) { alert("one"); });
2 $("#testDiv4").bind("click", function(event) { alert("two"); });

单击testDiv4对象时, 依次提示"one"和"two".

2. 统一了事件名称.

添加多播事件委托时, ie中是事件名称前面有"on". 但是使用bind()函数我们不用区分ie和dom , 因为内部jQuery已经帮我们统一了事件的名称.

3. 可以将对象行为全部用脚本控制.

让HTML代码部分只注意"显示"逻辑. 现在的趋势是将HTML的行为, 内容与样式切分干净. 其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式. 使用jQuery事件处理函数可以避免在HTML标签上直接添加事件.

下面是基础的jQuery事件处理函数:

事件处理 Event Handling:

名称

说明

举例

bind( type, [data], fn ) 为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数
当每个段落被点击的时候，弹出其文本:
$("p").bind("click", function(){ alert( $(this).text() ); });

one( type, [data], fn ) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数
当所有段落被第一次点击的时候，显示所有其文本:
$("p").one("click", function(){ alert( $(this).text() ); });

trigger( event, [data] )
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。
你也可以触发由bind()注册的自定义事件

给一个事件传递参数:
$("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(){ $("Focused!").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参数, 可以在事件处理之前传递一些附加的数据:

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

注意event参数的使用. jQuery中统一了事件对象, 将事件对象作为事件处理函数的唯一参数传递.
data参数我们也要通过event.data 进行访问. 为何要提供data参数呢?
因为我们经常碰到这样的问题: 希望在事件处理中根据事件源的某些数据进行特殊处理.

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

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

比如：

获取自定义数据‐1

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

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

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

获取自定义数据‐2

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

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

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

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

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

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

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

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

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

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

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4   <title>jQuery事件处理:trigger和triggerHandler示例</title>
5   <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
6   <script type="text/javascript">
7    $(function() {
8         $("#old").click(function() {
9             $("#divResult").html("");
10             $("input").trigger("focus");
11         });
12
13          $("#new").click(function() {
14              $("#divResult").html("");
15              $("input").triggerHandler("focus");
16          });
17
18          $("input").focus(function() {
19              $("Focused!").appendTo("#divResult");
20          });
21      })
22    </script>
23   </head>
24    <body>
25         <button id="old"> .trigger("focus")</button>
26         <button id="new"> .triggerHandler("focus")</button><br /> <br />
27         <input type="text" value="To Be Focused" />
28         <div id="divResult"></div>
29     </body>
30 </html>

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

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

也就是说, trigger函数出发了浏览器默认的获取焦点的行为,让input元素获得了焦点, 所以再次调用了focus事件处理函数.
triggerHandler只调用为focus事件绑定的事件处理函数, 而不引发浏览器行为, 所以最后input元素没有获得焦点.

ghycn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

1	$("#testDiv4").bind("click", function(event) { alert("one"); });
2	$("#testDiv4").bind("click", function(event) { alert("two"); });

名称	说明	举例
bind( type, [data], fn )	为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数	当每个段落被点击的时候，弹出其文本: $("p").bind("click", function(){ alert( $(this).text() ); });
one( type, [data], fn )	为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数	当所有段落被第一次点击的时候，显示所有其文本: $("p").one("click", function(){ alert( $(this).text() ); });
trigger( event, [data] )	在每一个匹配的元素上触发某类事件。这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。你也可以触发由bind()注册的自定义事件	给一个事件传递参数: $("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(){ $("Focused!").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	function handler(event) { alert(event.data.foo); }
2	$("p").bind("click", {foo: "bar"}, handler)

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2	<html xmlns="http://www.w3.org/1999/xhtml">
3	<head>
4	<title>jQuery事件处理:trigger和triggerHandler示例</title>
5	<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
6	<script type="text/javascript">
7	$(function() {
8	$("#old").click(function() {
9	$("#divResult").html("");
10	$("input").trigger("focus");
11	});
12
13	$("#new").click(function() {
14	$("#divResult").html("");
15	$("input").triggerHandler("focus");
16	});
17
18	$("input").focus(function() {
19	$("Focused!").appendTo("#divResult");
20	});
21	})
22	</script>
23	</head>
24	<body>
25	<button id="old"> .trigger("focus")</button>
26	<button id="new"> .triggerHandler("focus")</button><br /> <br />
27	<input type="text" value="To Be Focused" />
28	<div id="divResult"></div>
29	</body>
30	</html>