`

Dom多事件注册

阅读更多
今天看到这样一段代码,如下:
Page.clickFunctions = [];
Page.click = function(event){
	for(var i=0;i<Page.clickFunctions.length;i++){
		Page.clickFunctions[i](event);
	}
	if(window!=window.parent&&window.parent.Page){
		window.parent.Page.click();
	}
}
Page.onClick = function(f){
	Page.clickFunctions.push(f);
}

Page._Sort = function(a1,a2){
	var i1 = a1[1];
	var i2 = a2[1];
	if(typeof(i1)=="number"){
		if(typeof(i2)=="number"){
			if(i1>i2){
				return 1;
			}else if(i1==i2){
				return 0;
			}else{
				return -1;
			}
		}
		return -1;
	}else{
		if(typeof(i2)=="number"){
			return 1;
		}else{
			return 0;
		}
	}
}


Page.loadFunctions = [];
Page.load = function(){
	Page.loadFunctions.sort(Page._Sort);
	for(var i=0;i<Page.loadFunctions.length;i++){
		try{
			Page.loadFunctions[i][0]();
		}catch(ex){
		}
	}
}
Page.onLoad = function(f,index){
	index = index || 1;
	Page.loadFunctions.push([f,index]);
}


Page.readyFunctions = [];
Page.ready=function(){
	if(window._OnReady){
		try{window._OnReady();}catch(ex){}
	}
	Page.readyFunctions.sort(Page._Sort);
	for(var i=0;i<Page.readyFunctions.length;i++){
		try{Page.readyFunctions[i][0]();}catch(ex){}
	}
};
Page.onReady= function(f,index){
	Page.readyFunctions.push([f,index]);
};
Page.mouseDownFunctions = [];
Page.mousedown = function(event){
	for(var i=0;i<Page.mouseDownFunctions.length;i++){
		Page.mouseDownFunctions[i](event);
	}
}

Page.onMouseDown = function(f){
	Page.mouseDownFunctions.push(f);
}

Page.mouseUpFunctions = [];
Page.mouseup = function(event){
	for(var i=0;i<Page.mouseUpFunctions.length;i++){
		Page.mouseUpFunctions[i](event);
	}
}

Page.onMouseUp = function(f){
	Page.mouseUpFunctions.push(f);
}

Page.mouseMoveFunctions = [];
Page.mousemove = function(event){
	for(var i=0;i<Page.mouseMoveFunctions.length;i++){
		Page.mouseMoveFunctions[i](event);
	}
}

Page.onMouseMove = function(f){
	Page.mouseMoveFunctions.push(f);
}

Page.keyDownFunctions = [];
Page.keydown = function(event){
	for(var i=0;i<Page.keyDownFunctions.length;i++){
		Page.keyDownFunctions[i](event);
	}
}

Page.onKeyDown = function(f){
	Page.keyDownFunctions.push(f);
}

/* 监听document对象上的click、mousedown、load、mouseup、mousemove事件 */
if (document.attachEvent) {
	document.attachEvent("onclick", Page.click);
	document.attachEvent("onmousedown", Page.mousedown);
	window.attachEvent("onload", Page.load);
	document.attachEvent("onmouseup", Page.mouseup);
	document.attachEvent("onmousemove", Page.mousemove);
} else {
	document.addEventListener("click", Page.click, false);
	document.addEventListener("mousedown", Page.mousedown, false);
	window.addEventListener("load", Page.load, false);
	document.addEventListener("mouseup", Page.mouseup, false);
	document.addEventListener("mousemove", Page.mousemove, false);
}


仔细一看,其实是实现了dom的多事件注册,稍稍重构了一下,将事件注册的任务封装进EventManager中,这样看着舒服多了,而且以后可以重用:
/* 监听document/window对象上的click、mousedown、load、mouseup、mousemove事件 */
Page.onClick = function(fun) {
	Sky.EventManager.addEvent(document, "click", fun);
}
Page.onLoad = function(fun, index) {
	Sky.EventManager.addEvent(window, "load", fun, index);
}
Page.onMouseDown = function(fun) {
	Sky.EventManager.addEvent(document, "mousedown", fun);
}
Page.onMouseUp = function(fun) {
	Sky.EventManager.addEvent(document, "mouseup", fun);
}
Page.onMouseMove = function(fun) {
	Sky.EventManager.addEvent(document, "mousemove", fun);
}
Page.onKeyDown = function(fun) {
	Sky.EventManager.addEvent(document, "keydown", fun);
}
分享到:
评论

相关推荐

    DOM事件总结,前端学习

    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮)。 提示: 在 W3C 2 级 DOM 事件中规范了事件模型。

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     4.3 控制事件流和注册事件侦听器   4.3.1 事件流   4.3.2 注册事件   4.3.3 在事件侦听器中访问事件对象   4.3.4 跨浏览器的事件属性和方法   4.4 小结   第5章 动态修改样式和层叠样式表   ...

    JavaScript DOM 添加事件

    因为对于支持DOM的浏览器来说,添加事件是用addEventListener()方法来给对象添加事件! 而对于MSIE来说则是用attachEvent()来给对象添加事件!这就使得我们必须用一个容器来装载这两个不同浏览器上对事件的处理方式...

    【JavaScript源代码】JavaScript中事件冒泡机制示例详析.docx

     事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

     4.3 控制事件流和注册事件侦听器   4.3.1 事件流   4.3.2 注册事件   4.3.3 在事件侦听器中访问事件对象   4.3.4 跨浏览器的事件属性和方法   4.4 小结   第5章 动态修改样式和层叠样式表   ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part2.rar

     4.3 控制事件流和注册事件侦听器   4.3.1 事件流   4.3.2 注册事件   4.3.3 在事件侦听器中访问事件对象   4.3.4 跨浏览器的事件属性和方法   4.4 小结   第5章 动态修改样式和层叠样式表   ...

    dom-events:W3C DOM 事件作为 JavaScript 组件的实现

    dom事件将 W3C DOM 事件实现为 JavaScript 组件。安装使用安装: $ component install graouts/dom-events用法您可以创建一个 EventTarget 实例并使用它来注册事件侦听器和调度事件: var DOM = require ( "dom-...

    DOM 中的事件处理介绍

    该接口提供了 ‘addEventListener’ 和 ‘removeEventListener’ 方法,... 事件注册 根据 DOM 2 Events 中描述,节点使用 ‘addEventListener’ 和 ‘removeEventListener’ 方法绑定和解绑事件监听器,但 IE6 IE7 IE

    event-custom:自定义事件注册和触发像 dom 事件

    自定义事件注册和触发像 dom 事件 节点示例 var event = require ( 'modulex-event-custom' ) ; var xutil = require ( 'modulex-util' ) ; var target = xutil . mix ( { } , event . Target ) ; target . on ( '...

    javascript循环变量注册dom事件 之强大的闭包

    } 结果出现了问题,所有的dom都被注册了 i=n 的时候的事件,查了一些资料,说是在循环过程过this被改变,注册过的事件也被随之改变,找到了一种解决方法; 代码如下: for (var i=0; i&lt;n; i++) { (function (i){...

    event-dom:跨浏览器的事件注册

    事件域 事件注册和跨浏览器触发 例子 modulex . use ( [ 'event-dom' ] , function ( Event ) { Event . on ( document . getElementById ( 't' ) , 'click' , function ( ) { } ) ; } ) ;

    【JavaScript源代码】JavaScript给事件委托批量添加事件监听详细流程.docx

    什么是事件委托 事件委托:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有:  减少DOM操作,提高性能...

    onload.js:一个简单的JS库,用于处理DOM加载后需要发生的事件

    使用功能onLoad.newHandler()您可以注册在DOM完全加载后发生的事件。 使用以下格式: onLoad.newHandler(function(){ console.log("Do Stuff Here"); }); 或者: var testFunction = function(){ console.log("Do ...

    ftdomdelegate:创建和管理DOM事件委托人

    FT的dom委托库是一个组件,用于绑定与给定选择器匹配的所有目标元素上的事件,而不管注册时DOM中是否存在任何东西。 这使开发人员可以实现。 用法 查看以开始使用ftdomdelegate 。 JavaScript 要导入ftdomdelegate...

    JS监听事件的叠加和移除功能

    html DOM元素有很多on开头的监听事件,如onload、onclick等,见DOM事件列表。但是同一种事件,后面注册的会覆盖前面的: [removed] = function(){ alert&#40;1&#41;; } [removed] = function(){ alert&#40;2&#41;...

    stimulus-existence:获取dom添加的事件并使用刺激删除元素

    刺激存在刺激控制器,从dom中删除元素,并在添加元素时收到事件通知。安装$ yarn add stimulus-existence用法向控制器注册控制器: // application.jsimport { Application } from "stimulus" ;import { ...

    深入分析原生JavaScript事件

    JQuery这种Write Less Do More的框架,用多了难免会对原生js眼高手低。 ... 直接在dom对象上注册事件名称,就是DOM0写法,比如: 代码如下: document.getElementById(“test”).onclick = functi

    JavaScript Event学习第五章 高级事件注册模型

    W3C和微软都着力于发展自己的事件注册模型来取代Netscape的传统模型。虽然对于微软的模型我不是很感冒,但是w3c的还是不错的,除了这个鼠标定位 的问题。不过现在只有小部分浏览器支持。 W3C W3C的DOM层面事件规范...

    JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题

    JavaScript对象与DOM对象进行绑定会遇到一个问题:如果被绑定的对象的方法中包含this关键字,当事件被触发时this指向的却是DOM对象,而不是之前的JS对象。

Global site tag (gtag.js) - Google Analytics