您的位置:时时app平台注册网站 > 彩世界网址 > 读jQuery之十三 添加事件和删除事件的核心方法

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

2019-11-28 03:07
  • (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); } // Add which for key events if ( event.which == null && (event.charCode != null || event.keyCode != null) ) { event.which = event.charCode != null ? event.charCode : event.keyCode; } // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs) if ( !event.metaKey && event.ctrlKey ) { event.metaKey = event.ctrlKey; } // Add which for click: 1 === left; 2 === middle; 3 === right // Note: button is not normalized, so don't use it if ( !event.which && event.button !== undefined ) { event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) )); } return event; }, 它至关心重视要做了以下工作 1,event = jQuery.Event; 该句创造了三个jQuery.伊芙nt类的实例对象,该指标修复及扩展上边刚刚提到了。 2, 一个巡回将原闯事件指标的具有属性拷贝给 1 中的event对象。 复制代码 代码如下: for ( var i = this.props.length, prop; i; ) { prop = this.props[ --i ]; event[ prop ] = originalEvent[ prop ]; } 3, 统一事件源对象为 target 。 4, 统一事件有关对象为 relativeTarget 。 5, 扩充了pageX , pageY ,这两性格子第贰遍在Firefox中引进的。不帮助该属性的浏览器选用clientX/Y计算得到。 6, 扩充了 which ,使用它拿走键盘按钮值。这几个本性也是在Firefox引进的。 7, 修复了metaKey。 8, 扩展了which,使用它拿走鼠标按钮值 精心的人恐怕注意到了,jQuery获取键盘按钮值和鼠标开关值都以利用which。它从未向其它性质相像去宽容W3C本来就有标准。这点自个儿在 读jQuery之七 及 各浏览器中鼠标按钮值的差别 做了详细深入分析。 最终,给zChain.js增添包装事件指标的相关代码。 zChain-0.7.1.js

jQuery的风云模块严重重视于其数据存储,你会意识自身的代码中的dataManager对象对应它。 这里只提供bind和unbind方法。暂不包括 1, 事件命名空间 2, 事件代理 3, 特殊事件如dom ready 接口如下: 复制代码 代码如下: E.bind; E.bind(el, 'click', fn, data); E.unbind; E.unbind; E.unbind; 复制代码 代码如下: /** * 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 . * * example * * E.bind; * * E.bind(el, 'click', fn, data); * * E.unbind; * * E.unbind; * * E.unbind; * */ E = function { var uuid = 0, globalCache = {}, doc = window.document, w3c = !!doc.addEventListener, expando = 'snandy' .replace, addListener = w3c ? function { el.addEventListener; } : function { el.attachEvent; }, removeListener = w3c ? function { el.removeEventListener; } : function { el.detachEvent; }; dispatch = w3c ? function{ try{ var evt = doc.createEvent; evt.initEvent; el.dispatchEvent{ alert }; } : function{ try{ el.fireEvent; }catch; } }, dataManager = { data : function { var getByName = typeof name === "string", thisCache, isNode = elem.nodeType, cache = isNode ? globalCache : elem, id = isNode ? elem[ expando ] : elem[ expando ] && expando; if { elem[expando] = id = uuid; } if{ cache[id] = {}; } thisCache = cache[id]; if { thisCache[name] = data; } return getByName ? thisCache[name] : thisCache; }, removeData : function { var id = elem[expando], thisCache = globalCache[id]; if{ return; } if(typeof name === 'string') { delete thisCache[name]; }else{ delete globalCache[id]; } } }; function returnFalse() { return false; } function returnTrue() { return true; } function now.getTime(); } function isEmptyObject{ for{ return false; } return true; } function addEvent (elem, types, handler, data) { if ( elem.nodeType === 3 || elem.nodeType === 8 ) { return; } if { handler = returnFalse; } else if { return; } var elemData = dataManager.data, events = elemData.events, eventHandle = elemData.handle, types = types.split { elemData.events = events = {}; } if { elemData.handle = eventHandle = function { return evtHandle.call( eventHandle.elem, e ); }; } eventHandle.elem = elem; var type, i = 0; while { var handleObj = {handler : handler, data : data}, handlers = events[type]; if { handlers = events[type] = []; addListener( elem, type, eventHandle ); } handlers.push; } elem = null; } function evtHandle { event = fixEvent( event || window.event ); var handlers = ((dataManager.data || {})[event.type] || []).slice; 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; if { if { 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 = returnFalse; } var type, origType, i = 0, j, elemData = dataManager.data, events = elemData && elemData.events; if( !elemData || !events ) { return; } // Unbind all events for the element if { types = types || ""; for { removeEvent; } return; } // Handle multiple events separated by a space // jQuery.unbind("mouseover mouseout", fn); types = types.split; while( ) { origType = type; handleObj = null; eventType = events[ type ]; if { continue; } if { for ( j = 0; j < eventType.length; j ) { handleObj = eventType[ j ]; removeEvent( elem, origType, handleObj.handler ); eventType.splice; } 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; } } } // 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 { var handle = elemData.handle; if { handle.elem = null; } delete elemData.events; delete elemData.handle; if ( isEmptyObject { dataManager.removeData; } } } function Event { 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.returnValue = false; }, stopPropagation: function() { this.isPropagationStopped = returnTrue; var e = this.originalEvent; if { e.stopPropagation(); } e.cancelBubble = true; }, stopImmediatePropagation: function() { this.isImmediatePropagationStopped = returnTrue; this.stopPropagation(); }, isDefaultPrevented: returnFalse, isPropagationStopped: returnFalse, isImmediatePropagationStopped: returnFalse }; function fixEvent { 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; for(var i = len, prop; i;) { prop = props[ --i ]; evt[ prop ] = originalEvent[ prop ]; } if { 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 { var handler; if( typeof type === "object" ) { for { bind(el, key, type[key], data); } return; } handler = fn; addEvent( el, type, handler, data ); } function unbind { if( typeof type === "object" ) { for { unbind; } }else { removeEvent; } } return { data : dataManager.data, removeData : dataManager.removeData, bind : bind, unbind : unbind }; };

譬喻说,截止事件冒泡IE用 cancelBubble ,标准浏览器则用 stopPropagation 。 获取事件源对象,IE用 srcElement ,标准浏览器则用 target 诸有此类。 jQuery 对原惹事件目的的修复和包裹首要运用 jQuery.Event 类和 jQuery.event.fix 方法。 复制代码 代码如下: jQuery.伊芙nt = function { // Allow instantiation without the 'new' keyword if ( !this.preventDefault ) { return new jQuery.Event; } // Event object if { this.originalEvent = src; this.type = src.type; // Events bubbling up the document may have been marked as prevented // by a handler lower down the tree; reflect the correct value. this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false || src.getPreventDefault && src.getPreventDefault ? returnTrue : returnFalse; // Event type } else { this.type = src; } // timeStamp is buggy for some events on Firefox // So we won't rely on the native value this.timeStamp = jQuery.now(); // Mark it as fixed this[ jQuery.expando ] = true; }; function returnFalse() { return false; } function returnTrue() { return true; } // jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding // jQuery.Event.prototype = { preventDefault: function() { this.isDefaultPrevented = returnTrue; var e = this.originalEvent; if { return; } // if preventDefault exists run it on the original event if { e.preventDefault(); // otherwise set the returnValue property of the original event to false } else { e.returnValue = false; } }, stopPropagation: function() { this.isPropagationStopped = returnTrue; var e = this.originalEvent; if { return; } // if stopPropagation exists run it on the original event if { e.stopPropagation(); } // otherwise set the cancelBubble property of the original event to true e.cancelBubble = true; }, stopImmediatePropagation: function() { this.isImmediatePropagationStopped = returnTrue; this.stopPropagation(); }, isDefaultPrevented: returnFalse, isPropagationStopped: returnFalse, isImmediatePropagationStopped: returnFalse };

1,扩张了 original伊芙nt 属性,该属性暂存了原闯祸件目的。2,修复了 timeStamp ,该属性IE6/7/8不帮衬,此外支持的各类浏览器中重回值也比不上。3,阻止DOM成分暗许行为统意气风发使用 preventDefault4,甘休事件冒泡统意气风发选用 stopPropagation5,完结或增加了 DOM3风云的几个方法:stopImmediatePropagation、isDefaultPrevented、isPropagationStopped、isImmediatePropagationStopped别的,jQuery.伊芙nt的 写类方式 也较优质。它 使用隐敝的new创设对象 。jQuery.event.fix方法 如下复制代码 代码如下: fix: function { if ( event[ jQuery.expando ] ) { return event; } // store a copy of the original event object // and "clone" to set read-only properties var originalEvent = event; event = jQuery.Event; for ( var i = this.props.length, prop; i; ) { prop = this.props[ --i ]; event[ prop ] = originalEvent[ prop ]; } // Fix target property, if necessary if { // Fixes #1925 where srcElement might not be defined either event.target = event.srcElement || document; } // check if target is a textnode if ( event.target.nodeType === 3 ) { event.target = event.target.parentNode; } // Add relatedTarget, if necessary if ( !event.relatedTarget && event.fromElement ) { event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement; } // Calculate pageX/Y if missing and clientX/Y available if ( event.pageX == null && event.clientX != null ) { var doc = document.documentElement, body = document.body; event.pageX = event.clientX (doc && doc.scrollLeft || body && body.scrollLeft || 0)

jQuery.伊芙nt 类首要做了以下职业

本文由时时app平台注册网站发布于彩世界网址,转载请注明出处:读jQuery之十三 添加事件和删除事件的核心方法

关键词: