JavaScript事件(event)相关的封装

作者: 麦草CMS 日期: 2019/03/13 18:59:59

由于在avaScript的事件绑定过程中,利用匿名函数传递参数与移除事件绑定之间存在矛盾。这里对JavaScript中事件相关的操作做了一个简易封装,用以解决矛盾。我的一些个人代码展示中用到这些封装的,我将在具体页面链接到本页。代码中经常用到MyCMS.popup.alert,是我写的一个JavaScript弹窗插件MyPopup,在本站可以找到。


代码如下:

var a = function(){'use strict';
	
	var MyCMS = {
	version: ".1",
	name: "MyCMS",
	author: "麦草CMS"
	};
	window.MyCMS = MyCMS;
		
	var utils = MyCMS.utils = {
		name: "MyCMSUtils",
		version: ".1",
		author: "麦草CMS",
		html: function (text, elem){
			var script, scripts, text1;
			elem.innerHTML = text;
			scripts = Object.values(qsa(elem, "script"));
			for(var i= 0, length = scripts.length; i < length; i++){
				script = document.createElement("script");
				for(var j = 0, attrs = scripts[i].attributes, length1 = attrs.length; j < length1; j++){
					if(attrs[j].specified){ script.setAttribute(attrs[j].name, attrs[j].value);}
				}
				text1 = document.createTextNode(scripts[i].innerHTML);
				script.appendChild(text1);
				scripts[i].parentNode.replaceChild(script, scripts[i]);
			}
		},
		parseToHTML: function(text, elem){
			var fragment = document.createDocumentFragment(), newElem = document.createElement("div");
			newElem.innerHTML = text;
			//alert(newElem.outerHTML);
			var children = newElem.childNodes;
			for(var i = 0, leng = children.length; i < leng; i++){
				if(children[i].nodeType == 3 && children[i].nodeValue.trim() == ""){
					continue;
				}
				if(children[i] == "undefined"){
					continue;
				}
				fragment.appendChild(children[i]);
			}
			if(elem && elem.nodeType == 1){
				elem.appendChild(fragment);
				return fragment;
			}
			return fragment;
		},
		getViewport: function(){
			if (document.compatMode == "BackCompat"){
				return {
					width: document.body.clientWidth,
					height: document.body.clientHeight
				};
			} else {
				return {
					width: document.documentElement.clientWidth,
					height: document.documentElement.clientHeight
				};
			}
		},
		getPageArea: function(){
			if (document.compatMode == "BackCompat"){
				return {
					width: Math.max(document.body.scrollWidth,document.body.clientWidth),
					height: Math.max(document.body.scrollHeight,document.body.clientHeight)
				};
			} else {
				return {
					width: Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
					height: Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
				};
			}
		},
		getScroll: function(){
			return {
				left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
				top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
			};
		},
		/*getRel: function(elem){
			var absPos = this.getAbs(elem),
				scroll = this.getScroll();
			return {
				x: absPos.x - scroll.left,
				y: absPos.y - scroll.top
			};
		},
		//递归法取得的元素绝对位置有误差,offsetTop获得的是相对位置的四舍五入值,
		getAbs: function(elem){
			var x = 0, y = 0;
			while (elem !== null){
				alert(elem.nodeName)
				x += (elem.offsetLeft);// + elem.clientLeft);
				y += (elem.offsetTop);// + elem.clientTop);
				elem = elem.offsetParent;
			}
			return {
				x: x,
				y: y
			};
		},*/
		getRel: function(elem){
			var domRect = elem.getBoundingClientRect();
			//alert(document.body.offsetTop)
			return {
				x: domRect.left,
				y: domRect.top
			};
		},
		getAbs: function(elem){
			var relPos = this.getRel(elem),
				scroll = this.getScroll();
			return {
				x: relPos.x + scroll.left,
				y: relPos.y + scroll.top
			};
		},
		setCookie: function(name, value, options){
			var theCookie, now, expires;
			if(name && value){
				theCookie = name + "=" + encodeURIComponent(value);
			}else{
				return;
			}
			if(options && getType(options) == "object"){
				if(options.expires){
					now = new Date();
					expires =  now.getTime() + (options.expires * 1000);
					now.setTime(expires);
					theCookie += "; expires=" + now.toGMTString();
				}
				if(options.path){ theCookie += "; path=" + options.path;}
				if(options.domain){ theCookie += "; domain=" + options.domain;}
			}
			document.cookie = theCookie;
		},
		getCookie: function(name){
			var cookies = document.cookie,
				arr = cookies.split(";"),
				arr1;
			for(var i = 0; i < arr.length; i++){
				arr1 = arr[i].split("=");
				if(arr1[0] === name){ return decodeURIComponent( arr1[1] );}
			}
			return null;
			
		}
	};
	
	//事件
	var evt1 = MyCMS.event = {
		name : "MyCMSEvent",
		version: ".1",
		author: "麦草CMS",
		index: 0,
		typeCache: [],
		handlers: [],
		elements: [],
		captureStateCache: [],
		addEvent : function(elem, evtType, handler, bool){
			var bool = ("undefined" === typeof bool || getType(bool) != "boolean") ? false : bool;
			if(elem.addEventListener){
				elem.addEventListener(evtType, handler, bool);
			}else{
				elem.attachEvent("on" + evtType, handler);
			}
			var handler = handler;
			this.typeCache.push(evtType);
			this.handlers.push(handler);
			this.elements.push(elem);
			this.captureStateCache.push(bool);
			return this.index++;
		},
		removeEvent: function(index){
			var type = getType(index);
			if(type === "number"){
				index = parseInt(index);
				if(this.elements[index].removeEventListener){
					this.elements[index].removeEventListener(this.typeCache[index], this.handlers[index], this.captureStateCache[index]);
				}else{
					this.elements[index].detachEvent("on" + this.typeCache[index], this.handlers[index]);
				}
			}else if(type.search("html") > -1){
				for(var i = 0, leng = this.elements.length; i < leng; i++){
					if(this.elements[i] === index){
						if(this.elements[i].removeEventListener){
							this.elements[i].removeEventListener(this.typeCache[i], this.handlers[i], this.captureStateCache[i]);
						}else{
							this.elements[i].detachEvent("on" + this.typeCache[i], this.handlers[i]);
						}
					}
				}
			}else{
				return;
			}
		},
		cancelBubble: function(evt){
			if(evt.stopPropagation){
				evt.stopPropagation();
			}else{
				evt.cancelBubble = true;
			}			
		},
		getEvent: function(evt){
			var evt = (evt && evt.target) ? evt : ((window.event) ? window.event : null);
			return evt;
		},
		getElement : function(evt){
			return (evt.srcElement) ? evt.srcElement : ((evt.target) ? evt.target : null);
		},
		preventDef: function(evt){
			if(evt.preventDefault){
				evt.preventDefault();
			}else{
				evt.returnValue = false;
			}
		},
		fireEvent: function(elem, evtType, evt){
			if(elem.dispatchEvent(evt)){
				elem.dispatchEvent(evt);
			}else{
				elem.fireEvent(evtType, evt);
			}
		},
		createEvent: function(eventType){
			var evt;
			if(document.createEvent){
				evt = document.createEvent(eventType);
				evt.initEvent("click", true, false);
			}else{
				evt = document.createEventObject();
			}
			return evt;
		}
	};
}();


我还说什么呢?
0.0020661354064941