- Jquery提供了一些来进行regist,remove,fire事件的方法。
- 6.2.1 Register
- 对于注册事件,jquery提供了bind、one、toggle、hover四种注册事件的方法, bind是最基本的方法。One是注册只运行一次的方法,toggle注册交替运行的方法。Hover是注册鼠标浮过的方法。
- bind : function(type, data, fn) {
- return type == "unload" ? this.one(type, data, fn) : this
- .each(function() {
- jQuery.event.add(this, type, fn || data, fn && data);
- }); },
- Bind中对于unload的事件,只能运行一次,其它的就采用默认的注册方式。
-
-
-
-
- one : function(type, data, fn) {
- var one = jQuery.event.proxy(fn || data, function(event) {
- jQuery(this).unbind(event, one);
- return (fn || data).apply(this, arguments);/this->当前的元素
- });
- return this.each(function() {
- jQuery.event.add(this, type, one, fn && data);
- });
- },
- One与bind基本上差不多,不同的在调用jQuery.event.add时,把注册的事件处理的函数做了一个小小的调整。One调用了jQuery.event.proxy进行了代理传入的事件处理函数。在事件触发调用这个代理的函数时,先把事件从cache中删除,再执行注册的事件函数。这里就是闭包的应用,通过闭包得到fn注册的事件函数的引用。
-
-
-
- /会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),
-
- hover : function(fnOver, fnOut) {
- return this.bind('mouseenter', fnOver).bind('mouseleave', fnOut);
- },
- Hover则是建立在bind的基础之上。
-
- toggle : function(fn) {
- var args = arguments, i = 1;
- while (i < args.length)
- jQuery.event.proxy(fn, args[i++]);
- return this.click(jQuery.event.proxy(fn, function(event) {
-
- return args[this.lastToggle++].apply(this,arguments)||false;
- }));
- },
- Toggle中参数可以是多个fn。先把它们代码生成UUID。之后调用click的方法来注册再次进行代理的callback。这个函数在事件触发时运行,它先计算上一次是执行了参数中的那个函数。之后阻止缺省动作。之后找到下一个函数运行。
-
- jQuery.each(
- ("blur,focus,load,resize,scroll,unload,click,dblclick,"
- + "mousedown,mouseup,mousemove,mouseover,mouseout,change,select,"
- + "submit,keydown,keypress,keyup,error").split(","),
- function(i, name) {jQuery.fn[name] = function(fn) {
- return fn ? this.bind(name, fn) : this.trigger(name);
- };});
- Jquery增加了一个常用的事件处理方法,包含上面调用的click。这里可以看出这里还是调用bind进行注册。当然这里还可以通过程序实现去触发事件。
-
- 上面的众多方法都是注册事件,其最终都落在jQuery.event.add();来完成注册的功能。如果我们采用Dom0或DOM1的事件方法,我们会采用elem.onclick=function(){}来为元素的某一种事件来注册处理函数。这个最大的缺点就是每个一个事件只是一个处理函数。在dom1的方式中有改进,我们可以采用elem.addEventListener(type, handle, false)为元素的事件注册多个处理函数。
- 这样的处理方式还不是很完美,如果我们只这个事件运行一次就有点麻烦了。我们要在事件的处理函数中最后进行elem.removeEventListener来取消事件的监听。这样做可能会有事务上的问题。如果第一个事件处理函数在没有取消事件监听之前,就再次触发了怎么办?
- 还有采用浏览器的方式,它不支持自定义事件的注册和处理,还不能为多个事件注册同一个处理函数。
- jQuery.event = {
- add : function(elem, types, handler, data) {
- if (elem.nodeType == 3 || elem.nodeType == 8) return;
-
- if (jQuery.browser.msie && elem.setInterval) elem = window;
-
- if (!handler.guid) handler.guid = this.guid++;
-
- if (data != undefined) { ①
- var fn = handler;
- handler =this.proxy(fn,function(){return fn.apply(this,arguments);});
- handler.data = data;
- }
-
- var events =jQuery.data(elem,"events")||jQuery.data(elem,"events",{}),
-
- handle = jQuery.data(elem, "handle")|| jQuery.data(elem, "handle",
- function() {
- if (typeof jQuery != "undefined"&& !jQuery.event.triggered)
- return jQuery.event.handle.apply(
- arguments.callee.elem, arguments);
- });
-
- handle.elem = elem;
-
- jQuery.each(types.split(/\s+/), function(index, type) { ④
-
- var parts = type.split(".");type = parts[0];handler.type = parts[1];
-
- var handlers = events[type]; ⑤
- if (!handlers) {
- handlers = events[type] = {};
-
- if (!jQuery.event.special[type]|| jQuery.event.special[type].setup
- .call(elem, data) === false) {
- if(elem.addEventListener)elem.addEventListener(type,handle,false);
- else if (elem.attachEvent)elem.attachEvent("on" + type, handle);
- }
- }
-
-
- handlers[handler.guid] = handler; ⑦
-
- jQuery.event.global[type] = true;
- });
-
- elem = null;
- },
- guid : 1,
- global : {},
- jQuery.event.add通过jQuery.data把事件相关的事件名和处理函数有机有序地组合起存放在jQuery.cache中与该元素对应的空间里。我们就一个例子分析一下add的过程中:假如我们招待下面jQuery(e1).bind("mouseover mouseout", fn0);jQuery(e1).bind("mouseover mouseout", fn1)的语句。
- 在jQuery(e1).bind("mouseover mouseout", fn0);时,②③都不可能从cache取到数,先初始化。此时的cache:{e1_uuid:{events:{},handle:fn}}。接着在⑤会为mouseover mouseout名初始化。此时的cache: {e1_uuid:{events:{ mouseover:{}, mouseout:{}},handle:fn}}。在⑥处向浏览器的事件中注册处理函数。接着⑦会把处理函数到事件名中。此时的cache: {e1_uuid:{events:{mouseover:{fn0_uuid:fn0},mouseout:{ fn0_uuid:fn0}},handle:fn}}。这里可以看出为采用proxy为函数生成uuid的作用了。
- 在jQuery(e1).bind("mouseover mouseout", fn1)时,②③都从cache取到数据{e1_uuid:{events:{mouseover:{fn0_uuid:fn0},mouseout:{ fn0_uuid:fn0}},接着在⑤取到mouseover:{fn0_uuid:fn0},mouseout:{ fn0_uuid:fn0}的引用。接着⑦会把处理函数注册到事件名中。此时的cache: {e1_uuid:{events:{mouseover:{fn0_uuid:fn0, fn1_uuid:fn1,},mouseout:{ fn0_uuid:fn0, fn1_uuid:fn1}},handle:fn}}。
- jQuery.event.add很重要的任务就是把注册的事件函数有序地存放起来。以便remove和fire事件的函数能找到。
-
-
posted @
2008-12-03 10:17
瑞尼书苑
阅读(
3443)
评论()
编辑
收藏
举报