jquery綁定原理 簡單解析與實現(xiàn)代碼分享
更新時間：2011年09月06日 20:13:18 作者：
下面的內(nèi)容只是自己的一些理解,水平有限,難免有錯,望指正
jq里面有一個data的方法,給dom元素綁定相關(guān)的數(shù)據(jù)的。當(dāng)給dom用jq的方法綁定了事件,會生成對應(yīng)的時間列表
可以看下面的例子(請在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());//執(zhí)行的函數(shù)
}
</script>
</body>
</html>
data是給元素綁定數(shù)據(jù)的
數(shù)據(jù)源是 cache對象
當(dāng)元素綁定數(shù)據(jù)的時候 會給元素添加一個屬性 jQueryxxx xxx為執(zhí)行jq的時間戳
這里要說明一下,有一個uuid 他是累加的
jQueryxxx的值就是這個uuid
cache 的 key就是這個 uuid
value就是要存的數(shù)據(jù)
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;
}
接著實現(xiàn)添加事件
jq里面是在 jQuery.event里面的add方法
在add方法里面實現(xiàn)了一下一些功能
取元素的events,handle這2個data綁定的數(shù)據(jù)
events存放的是事件列表
格式如下
{
click: [{handler:function(){},type:"click",guid:'xx'}.......],
mouse:[......]
}
handle是執(zhí)行的函數(shù)
(所有的執(zhí)行函數(shù)都是一樣的 他們遍歷事件列表 執(zhí)行對應(yīng)的事件)
然后遍歷types 因為可以綁定多個事件
回調(diào)函數(shù)也會給幾個屬性
假設(shè)回調(diào)函數(shù)是handler
handler.guid = gevent.guid++
handler.type = name
name應(yīng)該算一個特殊的命名 方便刪除用的
比如
$('#xx')
.bind('click',function(){})
.bind('click.d',handler)
name就是d了
刪除的時候可以只刪除d那個事件 不刪除上面的那個 click事件
最后是給元素綁定事件 但是執(zhí)行的函數(shù)都是
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;
//給函數(shù)一個唯一標(biāo)識的索引 方便后面刪除該事件
if ( !handler.guid )
handler.guid = this.guid++;
//獲得該元素的events handle 下的數(shù)據(jù)
var events = data(elem, "events") || data(elem, "events", {}),
handle =data(elem, "handle") || data(elem, "handle", function(){
//gevent.handle才是各種行為觸發(fā)后會執(zhí)行的函數(shù)
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(".");
//獲得該事件是否已經(jīng)存在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);
}
//吧函數(shù)放到元素的該事件的列表里面
handlers[handler.guid] = handler;
});
elem = null;
}
}
gevent.hander是綁定事件真正執(zhí)行的函數(shù)
在gevent.hander里面也有取.特殊命名的地方 但是不知道做什么用的
hander里面先對event進(jìn)行包裝
包裝見gevent. fix 和 setEvent
主要是對做一個原生event的一個copy 然后把不兼容的方法 都合成兼容的寫法
然后取元素的events (事件列表)
然后遍歷這個事件列表 判斷type是不是事件列表的key 是的話就執(zhí)行事件
在執(zhí)行列表函數(shù)的時候會判斷返回值
如果返回false 還可以組織事件冒泡 和 默認(rèn)行為
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];
//遍歷這個事件列表 執(zhí)行該執(zhí)行的東西
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;
//執(zhí)行事件 并且是用元素調(diào)用的事件 可以吧事件里面的this執(zhí)行元素 ret為函數(shù)的返回值
var ret = handler.apply(this, arguments);
//如果有返回值 且返回值是false 執(zhí)行阻止事件冒泡 阻止執(zhí)行事件默認(rèn)行為
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屬性 如果有中個屬性 說明已經(jīng)生成了event了 不需要在次對event進(jìn)行包裝
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 ];
}
//將目標(biāo)元素同一成event.target
if ( !event.target )
event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either
//如果發(fā)現(xiàn)是文本節(jié)點 取他的父節(jié)點
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;
//給函數(shù)一個唯一標(biāo)識的索引 方便后面刪除該事件
if ( !handler.guid )
handler.guid = this.guid++;
//獲得該元素的events handle 下的數(shù)據(jù)
var events = data(elem, "events") || data(elem, "events", {}),
handle =data(elem, "handle") || data(elem, "handle", function(){
//gevent.handle才是各種行為觸發(fā)后會執(zhí)行的函數(shù)
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(".");
//獲得該事件是否已經(jīng)存在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);
}
//吧函數(shù)放到元素的該事件的列表里面
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個參數(shù) 函數(shù) 則刪除這個事件
if ( handler )
delete events[type][handler.guid];
else{
//遍歷中個這個的所有行為
for ( var handle in events[type] ){
// Handle the removal of namespaced events
//刪除有特殊命名的函數(shù)
//如果沒有特殊命名 正則 則是/^|..|$/ 可以匹配空 所以也能刪除掉沒有特殊命名的函數(shù)
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;
//如果發(fā)現(xiàn)元素的整個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];
//遍歷這個事件列表 執(zhí)行該執(zhí)行的東西
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;
//執(zhí)行事件 并且是用元素調(diào)用的事件 可以吧事件里面的this執(zhí)行元素 ret為函數(shù)的返回值
var ret = handler.apply(this, arguments);
//如果有返回值 且返回值是false 執(zhí)行阻止事件冒泡 阻止執(zhí)行事件默認(rèn)行為
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屬性 如果有中個屬性 說明已經(jīng)生成了event了 不需要在次對event進(jìn)行包裝
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 ];
}
//將目標(biāo)元素同一成event.target
if ( !event.target )
event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either
//如果發(fā)現(xiàn)是文本節(jié)點 取他的父節(jié)點
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>
可以看下面的例子(請在firefox中查看 因為firefox中對象支持toSource())
復(fù)制代碼 代碼如下:
<!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());//執(zhí)行的函數(shù)
}
</script>
</body>
</html>
data是給元素綁定數(shù)據(jù)的
數(shù)據(jù)源是 cache對象
當(dāng)元素綁定數(shù)據(jù)的時候 會給元素添加一個屬性 jQueryxxx xxx為執(zhí)行jq的時間戳
這里要說明一下,有一個uuid 他是累加的
jQueryxxx的值就是這個uuid
cache 的 key就是這個 uuid
value就是要存的數(shù)據(jù)
data對于事件的綁定是很重要的................................
復(fù)制代碼 代碼如下:
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;
}
接著實現(xiàn)添加事件
jq里面是在 jQuery.event里面的add方法
在add方法里面實現(xiàn)了一下一些功能
取元素的events,handle這2個data綁定的數(shù)據(jù)
events存放的是事件列表
格式如下
{
click: [{handler:function(){},type:"click",guid:'xx'}.......],
mouse:[......]
}
handle是執(zhí)行的函數(shù)
(所有的執(zhí)行函數(shù)都是一樣的 他們遍歷事件列表 執(zhí)行對應(yīng)的事件)
然后遍歷types 因為可以綁定多個事件
回調(diào)函數(shù)也會給幾個屬性
假設(shè)回調(diào)函數(shù)是handler
handler.guid = gevent.guid++
handler.type = name
name應(yīng)該算一個特殊的命名 方便刪除用的
比如
$('#xx')
.bind('click',function(){})
.bind('click.d',handler)
name就是d了
刪除的時候可以只刪除d那個事件 不刪除上面的那個 click事件
最后是給元素綁定事件 但是執(zhí)行的函數(shù)都是
function(){
gevent.handle.apply(arguments.callee.elem, arguments);
});
復(fù)制代碼 代碼如下:
win.gevent = {
guid : 1,
add : function (elem, types, handler){
if ( elem.nodeType == 3 || elem.nodeType == 8 )
return;
if ( elem.setInterval && elem != window )
elem = window;
//給函數(shù)一個唯一標(biāo)識的索引 方便后面刪除該事件
if ( !handler.guid )
handler.guid = this.guid++;
//獲得該元素的events handle 下的數(shù)據(jù)
var events = data(elem, "events") || data(elem, "events", {}),
handle =data(elem, "handle") || data(elem, "handle", function(){
//gevent.handle才是各種行為觸發(fā)后會執(zhí)行的函數(shù)
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(".");
//獲得該事件是否已經(jīng)存在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);
}
//吧函數(shù)放到元素的該事件的列表里面
handlers[handler.guid] = handler;
});
elem = null;
}
}
gevent.hander是綁定事件真正執(zhí)行的函數(shù)
在gevent.hander里面也有取.特殊命名的地方 但是不知道做什么用的
hander里面先對event進(jìn)行包裝
包裝見gevent. fix 和 setEvent
主要是對做一個原生event的一個copy 然后把不兼容的方法 都合成兼容的寫法
然后取元素的events (事件列表)
然后遍歷這個事件列表 判斷type是不是事件列表的key 是的話就執(zhí)行事件
在執(zhí)行列表函數(shù)的時候會判斷返回值
如果返回false 還可以組織事件冒泡 和 默認(rèn)行為
復(fù)制代碼 代碼如下:
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];
//遍歷這個事件列表 執(zhí)行該執(zhí)行的東西
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;
//執(zhí)行事件 并且是用元素調(diào)用的事件 可以吧事件里面的this執(zhí)行元素 ret為函數(shù)的返回值
var ret = handler.apply(this, arguments);
//如果有返回值 且返回值是false 執(zhí)行阻止事件冒泡 阻止執(zhí)行事件默認(rèn)行為
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屬性 如果有中個屬性 說明已經(jīng)生成了event了 不需要在次對event進(jìn)行包裝
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 ];
}
//將目標(biāo)元素同一成event.target
if ( !event.target )
event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either
//如果發(fā)現(xiàn)是文本節(jié)點 取他的父節(jié)點
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
};
一個完整的例子
復(fù)制代碼 代碼如下:
<!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;
//給函數(shù)一個唯一標(biāo)識的索引 方便后面刪除該事件
if ( !handler.guid )
handler.guid = this.guid++;
//獲得該元素的events handle 下的數(shù)據(jù)
var events = data(elem, "events") || data(elem, "events", {}),
handle =data(elem, "handle") || data(elem, "handle", function(){
//gevent.handle才是各種行為觸發(fā)后會執(zhí)行的函數(shù)
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(".");
//獲得該事件是否已經(jīng)存在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);
}
//吧函數(shù)放到元素的該事件的列表里面
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個參數(shù) 函數(shù) 則刪除這個事件
if ( handler )
delete events[type][handler.guid];
else{
//遍歷中個這個的所有行為
for ( var handle in events[type] ){
// Handle the removal of namespaced events
//刪除有特殊命名的函數(shù)
//如果沒有特殊命名 正則 則是/^|..|$/ 可以匹配空 所以也能刪除掉沒有特殊命名的函數(shù)
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;
//如果發(fā)現(xiàn)元素的整個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];
//遍歷這個事件列表 執(zhí)行該執(zhí)行的東西
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;
//執(zhí)行事件 并且是用元素調(diào)用的事件 可以吧事件里面的this執(zhí)行元素 ret為函數(shù)的返回值
var ret = handler.apply(this, arguments);
//如果有返回值 且返回值是false 執(zhí)行阻止事件冒泡 阻止執(zhí)行事件默認(rèn)行為
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屬性 如果有中個屬性 說明已經(jīng)生成了event了 不需要在次對event進(jìn)行包裝
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 ];
}
//將目標(biāo)元素同一成event.target
if ( !event.target )
event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either
//如果發(fā)現(xiàn)是文本節(jié)點 取他的父節(jié)點
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>
相關(guān)文章
jquery實現(xiàn)網(wǎng)頁查找功能示例分享
當(dāng)需要在頁面中查找某個關(guān)鍵字時，一是可以通過瀏覽器的查找功能實現(xiàn)，二是可以通過前端腳本準(zhǔn)確查找定位，本文介紹通過jQuery實現(xiàn)的頁面內(nèi)容查找定位的功能，并可擴(kuò)展顯示查找后的相關(guān)信息2014-02-02
JQuery學(xué)習(xí)筆記 實現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果
為了保證前臺頁面的整潔，我們習(xí)慣性地將CSS放入一個單獨的.CSS文件中以便調(diào)用，而JS也同樣可以放到單獨的JS文件中去，并且頁面上的事件如onclick，onmouseover也可以分離出來，現(xiàn)在網(wǎng)上比較流行JQuery2008-11-11
這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)五星好評，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
最近接到一個古早的項目變更,設(shè)計的音樂播放的功能是自定義的樣式,對于jquery的項目第一反應(yīng)是先找插件,然而找了半天沒找到,最后只能自己實現(xiàn),文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-12-12
formStorage 基于jquery的一個插件(存儲表單中元素的狀態(tài)到本地)
原理很簡單,通過本地存儲機(jī)制(userData或者localStorage),存儲表單中元素的狀態(tài)到本地. 需要時可以把所存儲的狀態(tài)還原到表單元素上2012-01-01
本篇文章主要介紹了jQuery返回定位插件的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
在圖片加載前顯示一個加載標(biāo)志，當(dāng)圖片下載完畢后顯示圖片出來 可對圖片進(jìn)行是否自動縮放功能2008-12-12
發(fā)開中個人是比較喜歡用Repeater控件，特別是前臺可老是遇到一個問題就是一個列表的最后一項總是和上面的樣式不一樣 如上面的都有下邊框，最后一個就沒有2010-01-01
本文給大家講解關(guān)于此jQuery驗證的一些標(biāo)記以及使用方法，非常不錯，具有參考借鑒借鑒價值，需要的朋友參考下2017-01-01
jQuery實現(xiàn)當(dāng)拉動滾動條到底部加載數(shù)據(jù)的方法分析
這篇文章主要介紹了jQuery實現(xiàn)當(dāng)拉動滾動條到底部加載數(shù)據(jù)的方法,結(jié)合實例形式分析了jQuery針對滾動事件的監(jiān)聽、響應(yīng)及數(shù)據(jù)加載相關(guān)操作技巧,需要的朋友可以參考下2019-01-01