jquery绑定原理 简单解析与实现代码分享
jq里面有一个data的方法,给dom元素绑定相关的数据的。当给dom用jq的方法绑定了事件,会生成对应的时间列表
可以看下面的例子(请在firefox中查看 因为firefox中对象支持toSource())
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript">
window.onload = function(){
alert($.data($('#test')[0],'events'));//null
alert($.data($('#test')[0],'handle'));//null
$('#test')
.bind('click',function(){
alert(1)
})
.bind('mouseover',function(){
alert(2)
})
.bind('click',function(){
alert(3)
})
.bind('click',function(){
alert(4)
})
alert($.data($('#test')[0],'events').toSource());//时间列表
alert($.data($('#test')[0],'handle').toSource());//执行的函数
}
</script>
</body>
</html>
data是给元素绑定数据的
数据源是 cache对象
当元素绑定数据的时候 会给元素添加一个属性 jQueryxxx xxx为执行jq的时间戳
这里要说明一下,有一个uuid 他是累加的
jQueryxxx的值就是这个uuid
cache 的 key就是这个 uuid
value就是要存的数据
data对于事件的绑定是很重要的................................
代码如下:
function now(){
return +new Date;
};
var win = this,
expando = "jQuery" + now(),
uuid = 0,
cache = {};
win.data = function(elem, name, data){
var id = elem[expando];
if(!id)
id = elem[expando] = ++uuid;
if(name&&!cache[id])
cache[id] = {};
if(data !== undefined)
cache[id][name] = data;
return name
? cache[id][name]
: id;
}
win.removeData = function(elem, name){
var id = elem[expando];
if (name){
if (cache[id]) {
delete cache[id][name];
name = "";
for ( name in cache[ id ] )
break;
if ( !name )
removeData(elem);
}
}else{
try {
delete elem[expando];
} catch(e){
if ( elem.removeAttribute )
elem.removeAttribute( expando );
}
delete cache[id];
}
}
win.each = function( object, callback, args ) {
var name, i = 0, length = object.length;
if ( args ) {
if ( length === undefined ) {
for ( name in object )
if ( callback.apply( object[ name ], args ) === false )
break;
} else
for ( ; i < length; )
if ( callback.apply( object[ i++ ], args ) === false )
break;
} else {
if ( length === undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
} else
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
}
return object;
}
接着实现添加事件
jq里面是在 jQuery.event里面的add方法
在add方法里面实现了一下一些功能
取元素的events,handle这2个data绑定的数据
events存放的是事件列表
格式如下
{
click: [{handler:function(){},type:"click",guid:'xx'}.......],
mouse:[......]
}
handle是执行的函数
(所有的执行函数都是一样的 他们遍历事件列表 执行对应的事件)
然后遍历types 因为可以绑定多个事件
回调函数也会给几个属性
假设回调函数是handler
handler.guid = gevent.guid++
handler.type = name
name应该算一个特殊的命名 方便删除用的
比如
$('#xx')
.bind('click',function(){})
.bind('click.d',handler)
name就是d了
删除的时候可以只删除d那个事件 不删除上面的那个 click事件
最后是给元素绑定事件 但是执行的函数都是
function(){
gevent.handle.apply(arguments.callee.elem, arguments);
});
代码如下:
win.gevent = {
guid : 1,
add : function (elem, types, handler){
if ( elem.nodeType == 3 || elem.nodeType == 8 )
return;
if ( elem.setInterval && elem != window )
elem = window;
//给函数一个唯一标识的索引 方便后面删除该事件
if ( !handler.guid )
handler.guid = this.guid++;
//获得该元素的events handle 下的数据
var events = data(elem, "events") || data(elem, "events", {}),
handle =data(elem, "handle") || data(elem, "handle", function(){
//gevent.handle才是各种行为触发后会执行的函数
gevent.handle.apply(arguments.callee.elem, arguments);
});
handle.elem = elem;
//遍历事件名 因为可以是 click mouseover
each(types.split(/\s+/), function(index, type) {
var namespaces = type.split(".");
//获得事件名
type = namespaces.shift();
//去掉点后面的东西 是个特殊的命名 在删除的时候可以指定删除他 如 click.d
//用事件的type 记录住这个特殊的命名
handler.type = namespaces.slice().sort().join(".");
//获得该事件是否已经存在events 这个对象里面了
var handlers = events[type];
//如果不存在该事件 给元素绑定该事件
if (!handlers) {
handlers = events[type] = {};
if (elem.addEventListener)
elem.addEventListener(type, handle, false);
else if (elem.attachEvent)
elem.attachEvent("on" + type, handle);
}
//吧函数放到元素的该事件的列表里面
handlers[handler.guid] = handler;
});
elem = null;
}
}
gevent.hander是绑定事件真正执行的函数
在gevent.hander里面也有取.特殊命名的地方 但是不知道做什么用的
hander里面先对event进行包装
包装见gevent. fix 和 setEvent
主要是对做一个原生event的一个copy 然后把不兼容的方法 都合成兼容的写法
然后取元素的events (事件列表)
然后遍历这个事件列表 判断type是不是事件列表的key 是的话就执行事件
在执行列表函数的时候会判断返回值
如果返回false 还可以组织事件冒泡 和 默认行为
代码如下:
win.gevent = {
handle : function(event){
var all, handlers;
//包装event
event = arguments[0] = gevent.fix( event || window.event );
event.currentTarget = this;
//这里的........
var namespaces = event.type.split(".");
event.type = namespaces.shift();
all = !namespaces.length;
var namespace = RegExp("(^|\\.)" + namespaces.slice().sort().join(".*\\.") + "(\\.|$)");
//取这个元素的该行为 的 事件列表
handlers = (data(this, "events") || {} )[event.type];
//遍历这个事件列表 执行该执行的东西
for ( var j in handlers ) {
var handler = handlers[j];
if ( all || namespace.test(handler.type) ) {
// Pass in a reference to the handler function itself
// So that we can later remove it
// jq上的注释是是这么写的 把event的handler 引用这个事件 方便之后移除
// 但是在remove里面 并没有用到event的handler 不知道这里到底有什么用 且有多个事件的时候这个事件被取代
event.handler = handler;
//执行事件 并且是用元素调用的事件 可以吧事件里面的this执行元素 ret为函数的返回值
var ret = handler.apply(this, arguments);
//如果有返回值 且返回值是false 执行阻止事件冒泡 阻止执行事件默认行为
if( ret !== undefined ){
event.result = ret;
if ( ret === false ) {
event.preventDefault();
event.stopPropagation();
}
}
}
}
},
props: "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),
fix : function(event){
//new setEvent会给event给以个expando属性 如果有中个属性 说明已经生成了event了 不需要在次对event进行包装
if ( event[expando] )
return event;
//保留一个原始的event
// new一个新的event 这个与原始的event是不同的
var originalEvent = event;
event = new setEvent( originalEvent );
//获得原始event的属性值 有哪些属性值 见 this.props
for ( var i = this.props.length, prop; i; ){
prop = this.props[ --i ];
event[ prop ] = originalEvent[ prop ];
}
//将目标元素同一成event.target
if ( !event.target )
event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either
//如果发现是文本节点 取他的父节点
if ( event.target.nodeType == 3 )
event.target = event.target.parentNode;
if ( !event.relatedTarget && event.fromElement )
event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;
return event;
}
}
win.setEvent = function(src){
// Allow instantiation without the 'new' keyword
// Event object
if( src && src.type ){
this.originalEvent = src;
this.type = src.type;
// Event type
}else
this.type = src;
// timeStamp is buggy for some events on Firefox(#3843)
// So we won't rely on the native value
this.timeStamp = now();
// Mark it as fixed
this[expando] = true;
}
function returnFalse(){
return false;
}
function returnTrue(){
return true;
}
setEvent.prototype = {
preventDefault: function() {
var e = this.originalEvent;
if( !e )
return;
// if preventDefault exists run it on the original event
if (e.preventDefault)
e.preventDefault();
// otherwise set the returnValue property of the original event to false (IE)
e.returnValue = false;
},
stopPropagation: function() {
var e = this.originalEvent;
if( !e )
return;
// if stopPropagation exists run it on the original event
if (e.stopPropagation)
e.stopPropagation();
// otherwise set the cancelBubble property of the original event to true (IE)
e.cancelBubble = true;
},
stopImmediatePropagation:function(){
this.isImmediatePropagationStopped = returnTrue;
this.stopPropagation();
},
isImmediatePropagationStopped: returnFalse
};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<div id="vv" style="height:200px;width:200px; background-color:#f00; padding:20px;">
<div id="xx" style="height:200px;width:200px; background-color:#000000;"></div>
</div>
<script type="text/javascript">
(function(doc,undefined){
function now(){
return +new Date;
};
var win = this,
expando = "jQuery" + now(),
uuid = 0,
cache = {};
win.data = function(elem, name, data){
var id = elem[expando];
if(!id)
id = elem[expando] = ++uuid;
if(name&&!cache[id])
cache[id] = {};
if(data !== undefined)
cache[id][name] = data;
return name
? cache[id][name]
: id;
}
win.removeData = function(elem, name){
var id = elem[expando];
if (name){
if (cache[id]) {
delete cache[id][name];
name = "";
for ( name in cache[ id ] )
break;
if ( !name )
removeData(elem);
}
}else{
try {
delete elem[expando];
} catch(e){
if ( elem.removeAttribute )
elem.removeAttribute( expando );
}
delete cache[id];
}
}
win.each = function( object, callback, args ) {
var name, i = 0, length = object.length;
if ( args ) {
if ( length === undefined ) {
for ( name in object )
if ( callback.apply( object[ name ], args ) === false )
break;
} else
for ( ; i < length; )
if ( callback.apply( object[ i++ ], args ) === false )
break;
} else {
if ( length === undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
} else
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
}
return object;
}
win.gevent = {
guid : 1,
add : function (elem, types, handler){
if ( elem.nodeType == 3 || elem.nodeType == 8 )
return;
if ( elem.setInterval && elem != window )
elem = window;
//给函数一个唯一标识的索引 方便后面删除该事件
if ( !handler.guid )
handler.guid = this.guid++;
//获得该元素的events handle 下的数据
var events = data(elem, "events") || data(elem, "events", {}),
handle =data(elem, "handle") || data(elem, "handle", function(){
//gevent.handle才是各种行为触发后会执行的函数
gevent.handle.apply(arguments.callee.elem, arguments);
});
handle.elem = elem;
//遍历事件名 因为可以是 click mouseover
each(types.split(/\s+/), function(index, type) {
var namespaces = type.split(".");
//获得事件名
type = namespaces.shift();
//去掉点后面的东西 是个特殊的命名 在删除的时候可以指定删除他 如 click.d
//用事件的type 记录住这个特殊的命名
handler.type = namespaces.slice().sort().join(".");
//获得该事件是否已经存在events 这个对象里面了
var handlers = events[type];
//如果不存在该事件 给元素绑定该事件
if (!handlers) {
handlers = events[type] = {};
if (elem.addEventListener)
elem.addEventListener(type, handle, false);
else if (elem.attachEvent)
elem.attachEvent("on" + type, handle);
}
//吧函数放到元素的该事件的列表里面
handlers[handler.guid] = handler;
});
elem = null;
},
remove: function(elem, types, handler) {
if ( elem.nodeType == 3 || elem.nodeType == 8 )
return;
//获取这个元素的所有行为列表 如 {click:{},mouseocer:{}}
var events = data(elem, "events"), ret, index;
if(events){
//如果没出入行为类型 则删除这个元素的所有事件
//如果传入的是.xx这种形式的 把所有行为的包含.xx命名的全部干掉
if ( types === undefined || (typeof types === "string" && types.charAt(0) == ".") ){
for ( var type in events )
this.remove( elem, type + (types || "") );
}else{
//不知道干嘛的
if ( types.type ) {
handler = types.handler;
types = types.type;
}
//因为删除事件可以一次支持删除多个 如click mouseover 所有要遍历删除
each(types.split(/\s+/),function(index, type){
var namespaces = type.split(".");
type = namespaces.shift();
var namespace = RegExp("(^|\\.)" + namespaces.slice().sort().join(".*\\.") + "(\\.|$)");
if ( events[type] ) {
//如果传了第3个参数 函数 则删除这个事件
if ( handler )
delete events[type][handler.guid];
else{
//遍历中个这个的所有行为
for ( var handle in events[type] ){
// Handle the removal of namespaced events
//删除有特殊命名的函数
//如果没有特殊命名 正则 则是/^|..|$/ 可以匹配空 所以也能删除掉没有特殊命名的函数
if ( namespace.test(events[type][handle].type) )
delete events[type][handle];
}
}
}
for ( ret in events[type] ) break;
//如果events[type]变成空的了 也就是{} 删除这个元素的的绑定事件
if ( !ret ) {
if (elem.removeEventListener)
elem.removeEventListener(type, data(elem, "handle"), false);
else if (elem.detachEvent)
elem.detachEvent("on" + type, data(elem, "handle"));
ret = null;
delete events[type];
}
});
}
for ( ret in events ) break;
//如果发现元素的整个events都是空的了
//清空掉handle 并且清空掉他所有的引用
if ( !ret ) {
var handle = data( elem, "handle" );
if ( handle ) handle.elem = null;
removeData( elem, "events" );
removeData( elem, "handle" );
}
}
},
handle : function(event){
var all, handlers;
//包装event
event = arguments[0] = gevent.fix( event || window.event );
event.currentTarget = this;
//这里的........
var namespaces = event.type.split(".");
event.type = namespaces.shift();
all = !namespaces.length;
var namespace = RegExp("(^|\\.)" + namespaces.slice().sort().join(".*\\.") + "(\\.|$)");
//取这个元素的该行为 的 事件列表
handlers = (data(this, "events") || {} )[event.type];
//遍历这个事件列表 执行该执行的东西
for ( var j in handlers ) {
var handler = handlers[j];
if ( all || namespace.test(handler.type) ) {
// Pass in a reference to the handler function itself
// So that we can later remove it
// jq上的注释是是这么写的 把event的handler 引用这个事件 方便之后移除
// 但是在remove里面 并没有用到event的handler 不知道这里到底有什么用 且有多个事件的时候这个事件被取代
event.handler = handler;
//执行事件 并且是用元素调用的事件 可以吧事件里面的this执行元素 ret为函数的返回值
var ret = handler.apply(this, arguments);
//如果有返回值 且返回值是false 执行阻止事件冒泡 阻止执行事件默认行为
if( ret !== undefined ){
event.result = ret;
if ( ret === false ) {
event.preventDefault();
event.stopPropagation();
}
}
}
}
},
props: "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),
fix : function(event){
//new setEvent会给event给以个expando属性 如果有中个属性 说明已经生成了event了 不需要在次对event进行包装
if ( event[expando] )
return event;
//保留一个原始的event
// new一个新的event 这个与原始的event是不同的
var originalEvent = event;
event = new setEvent( originalEvent );
//获得原始event的属性值 有哪些属性值 见 this.props
for ( var i = this.props.length, prop; i; ){
prop = this.props[ --i ];
event[ prop ] = originalEvent[ prop ];
}
//将目标元素同一成event.target
if ( !event.target )
event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either
//如果发现是文本节点 取他的父节点
if ( event.target.nodeType == 3 )
event.target = event.target.parentNode;
if ( !event.relatedTarget && event.fromElement )
event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;
return event;
}
}
win.setEvent = function(src){
// Allow instantiation without the 'new' keyword
// Event object
if( src && src.type ){
this.originalEvent = src;
this.type = src.type;
// Event type
}else
this.type = src;
// timeStamp is buggy for some events on Firefox(#3843)
// So we won't rely on the native value
this.timeStamp = now();
// Mark it as fixed
this[expando] = true;
}
function returnFalse(){
return false;
}
function returnTrue(){
return true;
}
setEvent.prototype = {
preventDefault: function() {
var e = this.originalEvent;
if( !e )
return;
// if preventDefault exists run it on the original event
if (e.preventDefault)
e.preventDefault();
// otherwise set the returnValue property of the original event to false (IE)
e.returnValue = false;
},
stopPropagation: function() {
var e = this.originalEvent;
if( !e )
return;
// if stopPropagation exists run it on the original event
if (e.stopPropagation)
e.stopPropagation();
// otherwise set the cancelBubble property of the original event to true (IE)
e.cancelBubble = true;
},
stopImmediatePropagation:function(){
this.isImmediatePropagationStopped = returnTrue;
this.stopPropagation();
},
isImmediatePropagationStopped: returnFalse
};
})(document);
var $ = function(id){return document.getElementById(id)}
var a = function(){alert(1)}
window.onload = function(){
gevent.add($('xx'),'click',a);
gevent.add($('xx'),'click',function(){alert(1)});
gevent.add($('xx'),'click',function(){alert(2)});
gevent.add($('xx'),'click',function(){alert(3)});
gevent.add($('xx'),'click.xx',function(){alert(4)});
}
</script>
</body>
</html>
相关推荐
-
jquery绑定原理 简单解析与实现代码分享
jq里面有一个data的方法,给dom元素绑定相关的数据的.当给dom用jq的方法绑定了事件,会生成对应的时间列表 可以看下面的例子(请在firefox中查看 因为firefox中对象支持toSource()) 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
-
jquery实现的简单二级菜单效果代码
本文实例讲述了jquery实现的简单二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的二级菜单,研究了这么多天,才学会用jquery写一个菜单,也算是对自己的鼓励吧,自我感觉这个菜单很不错,欢迎朋友们指点江山. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-2l-menu-style-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
-
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
这是一款基于jQuery的百叶窗焦点图动画,和之前介绍的CSS3百叶窗焦点图动画不同的是,它的兼容性更好,实用性更强,因为它是基于纯jQuery的,基本上所有浏览器都能够支持.焦点图的图片切换动画是百叶窗的动画方式,但也有几种不同的百叶窗动画,因此也不会觉得单调. 在线演示 源码下载 HTML代码 <div id="slider"> <img src="images/1.jpg" alt="我们1" title=&quo
-
Vue数据双向绑定原理实例解析
Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的,首先是对数据进行监听,然后当监听的属性发生变化时则告诉订阅者是否要更新,若更新就会执行对应的更新函数从而更新视图 MVC模式 以往的MVC模式是单向绑定,即Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新 MVVM模式 MVVM模式就是Model–View–ViewModel模式.它实现了View的变动,自动反映在 ViewModel,反之亦然.对于双向绑定的理解,就是用户更
-
如jQuery般易用的api风格代码分享
回到正题,如jQuery般易用的api风格?那到底是什么样的风格呢?个人觉得比较重要的有两点,一是对dom操作的链式调用,并且都呈队列状态,不仅仅使代码的可读语义变得通俗易懂,而且省去了对同一dom元素的多个链式操作时的回调中嵌回调的方式,这是很重要的一点. 二是对元素的批量操作,这是建立在它强大的选择器上的.jq选择器很强大,这是人所众知的,就不多说了.而且肯定也不是一两天就能实现的了的,所以下面就对我所说的这两点谈谈我的看法. 基于它强大的选择器,jquery所有的dom操作都依赖于根据它选
-
jQuery超精致图片轮播幻灯片特效代码分享
本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"
-
jquery实现叠层3D文字特效代码分享
jquery实现叠层3D文字特效是一款效果非常酷,实现代码也很简单,没有用HTML5和CSS3元素,纯粹用Jquery代码实现的. 运行效果图:------------------------------效果演示----------------------------- 为大家分享的jquery实现叠层3D文字特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=u
-
基于jQuery仿淘宝产品图片放大镜代码分享
这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="
-
jquery点击缩略图切换视频播放特效代码分享
本文实例讲述了jquery点击缩略图切换视频播放特效.分享给大家供大家参考.具体如下: jquery点击缩略图切换视频播放是一款非常实用的播放代码,点击视频缩略图切换优酷视频播放的视频播放选项卡代码,支持flash视频切换选项卡. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery点击缩略图切换视频播放特效代码如下 <!DOCTYPE html
-
jQuery支持添加事件的日历特效代码分享（3种样式）
支持添加事件jQuery日历是一款可以实时添加删除时间的jquery日历插件代码,感兴趣的朋友快来学习学习吧 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery支持添加事件的日历特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html;