事件是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 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事件
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.