jQuery学习笔记四 事件

事件是javascript的灵魂,,jQuery的事件模块是较复杂的,本文具体来研究下最常用的绑定事件、删除事件和触发事件。

如图:jQuery事件模块看起来够复杂的

本文就写三个事件操作。

一 绑定事件

1,bind( type, [data], fn )

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

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

2,one( type, [data], fn )

one方法和bind类似,只不过是一次性的。

二 删除事件

删除事件方法unbind([type],[data])是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件,如果没有参数,则删除所有绑定的事件。

1,把所有段落的所有事件取消绑定
jQuery 代码:

1 $("p").unbind();

2,将段落的click事件取消绑定
jQuery 代码:

1 $("p").unbind("click");

3,删除foo事件
jQuery 代码:

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

三 触发事件

虽然为元素绑定了某些事件, 比如click, 但是有时希望在程序中触发这些事件,  那么我们便可以用以下两个方法:
trigger( event, [data] ) 和 triggerHandler( event, [data] )

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

通过以下例子便能轻松理解:

提示:你可以先修改部分代码再运行。

可以发现:If you called .triggerHandler() on a focus event - the browser’s default focus action would not be triggered, only the event handlers bound to the focus event.

无觅相关文章插件,快速提升流量

, ,

发表评论