- 浏览: 319486 次
- 性别:
- 来自: 南昌
文章分类
最新评论
-
j_bird:
你好,想探讨下滑动窗口是怎么计算的,一条群发短信发出去,滑动窗 ...
协议研发 中移动CMPP2.0协议API -
andyliulin:
楼主,现在的magicode 生成器工具的 官网,http: ...
Mgicode 生成器正式发布 -
huazai_wow:
楼主 你只是分析了 在jquery 中 有使用到 jQu ...
jquery event trigger 分析 -
dengkanghua:
CMPP2.0中出现流量控制错误是什么引起的。有什么解决办法吗 ...
协议研发 中移动CMPP2.0协议API -
JohnHust:
[flash=200,200][/flash][url][/u ...
Jquery源码分析(一)
6.2 事件的处理
prk/彭仁夔 08-08-26 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() {// fn || data, fn && data实现了data参数可有可无 jQuery.event.add(this, type, fn || data, fn && data); }); }, Bind中对于unload的事件,只能运行一次,其它的就采用默认的注册方式。 // 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。 // 在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。 // 这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。 // 如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。 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中的图像), //如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。 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)//每个函数分配GUID jQuery.event.proxy(fn, args[i++]);//修改后的还在args中 return this.click(jQuery.event.proxy(fn, function(event) {//分配GUID this.lastToggle = (this.lastToggle || 0) % i;//上一个函数 event.preventDefault();//阻止缺省动作 //执行参数中的第几个函数,apply可以采用array-like的参数 return args[this.lastToggle++].apply(this,arguments)||false; })); }, Toggle中参数可以是多个fn。先把它们代码生成UUID。之后调用click的方法来注册再次进行代理的callback。这个函数在事件触发时运行,它先计算上一次是执行了参数中的那个函数。之后阻止缺省动作。之后找到下一个函数运行。 //为jquery对象增加常用的事件方法 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 事件到一个元素上。 add : function(elem, types, handler, data) { if (elem.nodeType == 3 || elem.nodeType == 8) return;// 空白节点或注释 // IE不能传入window,先复制一下。 if (jQuery.browser.msie && elem.setInterval) elem = window; // 为handler分配一个全局唯一的Id if (!handler.guid) handler.guid = this.guid++; // 把data附到handler.data中 if (data != undefined) { ① var fn = handler; handler =this.proxy(fn,function(){return fn.apply(this,arguments);}); handler.data = data; } // 初始化元素的events。如果没有取到events中值,就初始化data: {} ② var events =jQuery.data(elem,"events")||jQuery.data(elem,"events",{}), // 如果没有取到handle中值,就初始化data: function() {....} ③ handle = jQuery.data(elem, "handle")|| jQuery.data(elem, "handle", function() {//处理一个触发器的第二个事件和当page已经unload之后调用一个事件。 if (typeof jQuery != "undefined"&& !jQuery.event.triggered) return jQuery.event.handle.apply(//callee.elem=handle.elem arguments.callee.elem, arguments); }); // 增加elem做为handle属性,防止IE由于没有本地Event而内存泄露。 handle.elem = elem; // 处理采用空格分隔多个事件名,如jQuery(...).bind("mouseover mouseout", fn); jQuery.each(types.split(/\s+/), function(index, type) { ④ // 命名空间的事件,一般不会用到。 var parts = type.split(".");type = parts[0];handler.type = parts[1]; // 捆绑到本元素type事件的所有处理函数 var handlers = events[type]; ⑤ if (!handlers) {// 没有找到处理函数列表就初始化事件队列 handlers = events[type] = {}; // 如果type不是ready,或ready的setup执行返回false ⑥ 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); } } // 把处理器的id和handler形式属性对的形式保存在handlers列表中, // 也存在events[type][handler.guid]中。 handlers[handler.guid] = handler; ⑦ // 全局缓存这个事件的使用标识 jQuery.event.global[type] = true; }); elem = null; // 防止IE内存泄露。 }, 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事件的函数能找到。 //{elem_uuid_1:{events:{mouseover:{fn_uuid:fn1,fn_uuid1:fn2}, //mouseout:{fn_uuid:fn1,fn_uuid1:fn2}},handle:fn}}
发表评论
-
[转载]jquery.validate.js的基本用法入门
2011-03-10 22:35 2843[转载]jquery.validate.js的基本用法入门 j ... -
使用javascript动态创建SVG对象的问题
2011-01-11 17:18 4697无沙备忘录系列 -平时的一些研究,有时也会颇费功夫,然 ... -
evaluate mxGraph
2010-06-10 16:09 1678To evaluate mxGraph: - Navigate ... -
js中的prototype与constructor
2010-06-09 10:53 2861并且每个函数都有一个默认的prototype属性。 如果这个函 ... -
Jquery1.2.6 源码分析
2008-08-29 00:13 14073jQuery是一个非常优秀的J ... -
jquery fx分析
2008-08-28 19:37 62278 FX分析 prk/彭仁夔 ... -
jqueyr fx源码(修改)
2008-08-28 19:33 2624/* * author:prk date:2008-08-0 ... -
jquery.ajax
2008-08-27 16:50 80547.2 jquery.ajax ... -
jquery event domready
2008-08-26 17:39 40926.3 domReady的处理 ... -
jquery event trigger 分析
2008-08-26 17:37 112966.2.2 trigger ... -
jquery event 封装的源源分析
2008-08-26 17:35 45586.Event分析 ... -
jquery position
2008-08-25 16:34 87105.2.3 position ... -
jquery wrap
2008-08-25 08:12 44385.3.5 wrap ... -
jquery element content
2008-08-25 08:11 43025.4dom元素的内容 ... -
jquery class
2008-08-22 23:18 53275.1.2 Class prk/彭仁夔 2008- ... -
jquery attr
2008-08-22 23:16 75755 DOM元素 prk/彭仁夔 ... -
jquery Selector (修改)
2008-08-21 17:10 3059/** * author:prk * date:2008- ... -
CSS selector (jquery的源码分析,修改)
2008-08-21 17:09 43323.3、采用CSS方式查找Dom节点 ... -
如何找到Dom元素
2008-08-20 22:10 27683、如何找到Dom元素 ... -
Jquery源码分析(修改)
2008-08-20 22:07 5710Jquery源码分析 ...
相关推荐
对于事件的操作无非是addEvent,fireEvent,removeEvent这三个事 件方法。一般lib都会对浏览器的提供的函数做一些扩展,解决兼容性内存泄漏等问题。第三个问题就是如何得到domReady的状态。 6.1 event的包裹 浏览器的...
事件上报addEvent.vue
实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了;而且jQuery事件系统的设计思想也是基于该思想的,所以我们先分析一下Dean Edwards前辈的事件绑定。 a. jQuery事件原型——Dean ...
事件监听器 如果您需要支持旧版IE,则addEventListener()与addEvent()简单函数。安装npm install event-listener用法var listen = require ( 'event-listener' )// Returns an object with a .remove() methodvar ...
驱动事件的addEvent.js代码
这个小问题以前就遇到,却没有去总结 现在又遇到,为了得到准确结论,记录下来: 如题:同一事件 多个执行函数间的Event物件是否全等 例如: 代码如下: dom.addEvent(‘click’,fna); dom.addEvent(‘click’,fnb); 1...
addEvent()、removeEvent()、handleEvent()、fixEvent()
JavaScript Event Utility - tuts+ 的 Jeremy McPeak 的道具 一个非常简单的跨浏览器 JavaScript 事件实用程序; 对于那些不希望包含 JavaScript 库(例如 jQuery 等)的人。 具有以下方法的对象: addEvent:用于...
数据缓存系统最早应该是jQuery1.2引入的,那时它的事件系统完成照搬DE大神的addEvent.js,而addEvent在实现有个缺憾,它把事件的回调都放到EventTarget之上,这会引发循环引用,如果EventTarget是window对象,又会...
octjs, 像JavaScript库这样的jQuery #PreludeApril,我永远不会忘记。 我知道自己想要什么,我会不顾一切地战斗。 一个小的javascript,用来记住我成长的一天。用法在HTML中包含 oct.js 文件。#Overview.addEvent() ...
Event.addEvent, Event.delegateHandle这两个方法 Event.addEvent: 调用底层的addEventListener添加监听事件 Event.delegateHandle: 当发生事件之后,随着事件的冒泡上升,判断存在事件委托的元素,并执行对应的回...
javascript事件绑定和删除功能代码
第一种方式: $(document).ready(function(){ $(#clickme).click(function(){ alert(hello world click) }) }) 第二种方式(简写方式为第一种): ...注意:第三种方式只适用于jquery 1.7以上
javascript实现自定义事件,纯javascript不含vbscript。 通过自定义的HashMap.js和EventManager.js实现自定义事件的监听addEvent和发布fireEvent
int size:记录当前的事件数量 成员函数: addEvent:添加事件 check():检查left_event是否到达提醒时间 deleteEvent:从id或下标删除事件 GetEvent:从下标获取事件 getLeftEvent:设置left_event,并返回它 get...
当我们编写脚本的时候创建了交叉引用,例如如下代码: [removed] = function() { var x = document.getElementsByTagName('H3'); for (var i = 0; i < x.length; i++) { x[i].onclick = openClose;...
表中增加了两行代码是JQuery写的.用于给奇偶行变色. 代码如下:addEvent(window, “load”, sortables_init); var SORT_COLUMN_INDEX; function sortables_init() { // Find all tables with class sortable and ...