读jQuery之十三 添加事件和删除事件的核心方法

所属分类: 网络编程 / JavaScript 阅读数: 774
收藏 0 赞 0 分享
jQuery的事件模块严重依赖于其数据储存(jQuery.data),你会发现我的代码中的dataManager对象对应它。
这里只提供bind和unbind方法。暂不包含
1, 事件命名空间(event namespace)
2, 事件代理(event delegation)
3, 特殊事件如dom ready
接口如下:
复制代码 代码如下:

E.bind(el, 'click', fn);
E.bind(el, 'click', fn, data);
E.unbind(el, 'click', fn);
E.unbind(el, 'click');
E.unbind(el);

复制代码 代码如下:

/**
* Event from jQuery
* 2011-06-20 snandy
*
* A number of helper functions used for managing events.
* Many of the ideas behind this code originated from jQuery library (1.6.2).
*
* example
*
* E.bind(el, 'click', fn);
*
* E.bind(el, 'click', fn, data);
*
* E.unbind(el, 'click', fn);
*
* E.unbind(el, 'click');
*
* E.unbind(el);
*
*/
E = function( window ) {
var uuid = 0,
globalCache = {},
doc = window.document,
w3c = !!doc.addEventListener,
expando = 'snandy' + (''+Math.random()).replace(/\D/g, ''),
addListener = w3c ?
function(el, type, fn) { el.addEventListener(type, fn, false); } :
function(el, type, fn) { el.attachEvent('on' + type, fn); },
removeListener = w3c ?
function(el, type, fn) { el.removeEventListener(type, fn, false); } :
function(el, type, fn) { el.detachEvent('on' + type, fn); };
dispatch = w3c ?
function( el, type ){
try{
var evt = doc.createEvent('Event');
evt.initEvent( type, true, true );
el.dispatchEvent( evt );
}catch( e ){ alert( e ) };
} :
function( el, type ){
try{
el.fireEvent( 'on' + type );
}catch( e ){ alert( e ); }
},
dataManager = {
data : function ( elem, name, data ) {
var getByName = typeof name === "string",
thisCache,
isNode = elem.nodeType,
cache = isNode ? globalCache : elem,
id = isNode ? elem[ expando ] : elem[ expando ] && expando;
if(!id && isNode) {
elem[expando] = id = ++uuid;
}
if(!cache[id]){
cache[id] = {};
}
thisCache = cache[id];
if(data !== undefined) {
thisCache[name] = data;
}
return getByName ? thisCache[name] : thisCache;
},
removeData : function ( elem, name ) {
var id = elem[expando],
thisCache = globalCache[id];
if(!id || !thisCache){
return;
}
if(typeof name === 'string') {
delete thisCache[name];
}else{
delete globalCache[id];
}
}
};
function returnFalse() {
return false;
}
function returnTrue() {
return true;
}
function now() {
return (new Date).getTime();
}
function isEmptyObject( obj ){
for( var i in obj ){
return false;
}
return true;
}
function addEvent (elem, types, handler, data) {
if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
return;
}
if ( handler === false ) {
handler = returnFalse;
} else if ( !handler ) {
return;
}
var elemData = dataManager.data( elem ),
events = elemData.events,
eventHandle = elemData.handle,
types = types.split(" ");
if ( !events ) {
elemData.events = events = {};
}
if ( !eventHandle ) {
elemData.handle = eventHandle = function ( e ) {
return evtHandle.call( eventHandle.elem, e );
};
}
eventHandle.elem = elem;
var type, i = 0;
while ( type = types[i++] ) {
var handleObj = {handler : handler, data : data},
handlers = events[type];
if ( !handlers ) {
handlers = events[type] = [];
addListener( elem, type, eventHandle );
}
handlers.push( handleObj );
}
elem = null;
}
function evtHandle ( event ) {
event = fixEvent( event || window.event );
var handlers = ((dataManager.data(this, "events") || {})[event.type] || []).slice(0);
event.currentTarget = this;
for( var j = 0, l = handlers.length; j < l; j++ ) {
var handleObj = handlers[j];
event.handler = handleObj.handler;
event.data = handleObj.data;
event.handleObj = handleObj;
var ret = handleObj.handler.call( this, event );
if( ret !== undefined ) {
if( ret === false ) {
event.preventDefault();
event.stopPropagation();
}
}
if( event.isImmediatePropagationStopped() ) {
break;
}
}
}
function removeEvent( elem, types, handler ) {
// don't do events on text and comment nodes
if( elem.nodeType === 3 || elem.nodeType === 8 ) {
return;
}
if( handler === false ) {
handler = returnFalse;
}
var type, origType, i = 0, j,
elemData = dataManager.data( elem ),
events = elemData && elemData.events;
if( !elemData || !events ) {
return;
}
// Unbind all events for the element
if( !types ) {
types = types || "";
for ( type in events ) {
removeEvent( elem, type );
}
return;
}
// Handle multiple events separated by a space
// jQuery(...).unbind("mouseover mouseout", fn);
types = types.split(" ");
while( (type = types[ i++ ]) ) {
origType = type;
handleObj = null;
eventType = events[ type ];
if( !eventType ) {
continue;
}
if( !handler ) {
for ( j = 0; j < eventType.length; j++ ) {
handleObj = eventType[ j ];
removeEvent( elem, origType, handleObj.handler );
eventType.splice( j--, 1 );
}
continue;
}
for( j = 0; j < eventType.length; j++ ) {
handleObj = eventType[ j ];
if( handler === handleObj.handler ) {
// remove the given handler for the given type
eventType.splice( j--, 1 );
}
}
}
// remove generic event handler if no more handlers exist
if ( eventType.length === 0 ) {
delete events[ origType ];
}
// Remove the expando if it's no longer used
if ( isEmptyObject( events ) ) {
var handle = elemData.handle;
if ( handle ) {
handle.elem = null;
}
delete elemData.events;
delete elemData.handle;
if ( isEmptyObject( elemData ) ) {
dataManager.removeData( elem, 'events' );
}
}
}
function Event( src ) {
this.originalEvent = src;
this.type = src.type;
this.timeStamp = now();
}
Event.prototype = {
preventDefault: function() {
this.isDefaultPrevented = returnTrue;
var e = this.originalEvent;
if( e.preventDefault ) {
e.preventDefault();
}
e.returnValue = false;
},
stopPropagation: function() {
this.isPropagationStopped = returnTrue;
var e = this.originalEvent;
if( e.stopPropagation ) {
e.stopPropagation();
}
e.cancelBubble = true;
},
stopImmediatePropagation: function() {
this.isImmediatePropagationStopped = returnTrue;
this.stopPropagation();
},
isDefaultPrevented: returnFalse,
isPropagationStopped: returnFalse,
isImmediatePropagationStopped: returnFalse
};
function fixEvent( evt ) {
var props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),
len = props.length;
var originalEvent = evt;
evt = new Event(originalEvent);
for(var i = len, prop; i;) {
prop = props[ --i ];
evt[ prop ] = originalEvent[ prop ];
}
if(!evt.target) {
evt.target = evt.srcElement || document;
}
if( evt.target.nodeType === 3 ) {
evt.target = evt.target.parentNode;
}
if( !evt.relatedTarget && evt.fromElement ) {
evt.relatedTarget = evt.fromElement === evt.target ? evt.toElement : evt.fromElement;
}
if( evt.pageX == null && evt.clientX != null ) {
var doc = document.documentElement, body = document.body;
evt.pageX = evt.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
evt.pageY = evt.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
if( !evt.which && ((evt.charCode || evt.charCode === 0) ? evt.charCode : evt.keyCode) ) {
evt.which = evt.charCode || evt.keyCode;
}
if( !evt.metaKey && evt.ctrlKey ) {
evt.metaKey = evt.ctrlKey;
}
if( !evt.which && evt.button !== undefined ) {
evt.which = (evt.button & 1 ? 1 : ( evt.button & 2 ? 3 : ( evt.button & 4 ? 2 : 0 ) ));
}
return evt;
}
function bind ( el, type, fn, data ) {
var handler;
if( typeof type === "object" ) {
for( var key in type ) {
bind(el, key, type[key], data);
}
return;
}
handler = fn;
addEvent( el, type, handler, data );
}
function unbind ( el, type, fn ) {
if( typeof type === "object" ) {
for ( var key in type ) {
unbind( el, key, type[key] );
}
}else {
removeEvent( el, type, fn );
}
}
return {
data : dataManager.data,
removeData : dataManager.removeData,
bind : bind,
unbind : unbind
};
}(this);
更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多