文档章节

Dom多事件注册

暗之幻影
 暗之幻影
发布于 2014/12/17 18:23
字数 392
阅读 14
收藏 0
今天看到这样一段代码,如下:
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);
}

本文转载自:http://depravedangel.iteye.com/blog/842940

暗之幻影
粉丝 20
博文 377
码字总数 71245
作品 0
南京
高级程序员
私信 提问
NodeJS 学习笔记02】入门资源很重要

前言 在我映像中,异步最早出现与ajax,当时我还在搞.net,然后.net居然出了一个异步的控件...... 虽然我最后知道了他不是异步的......然后,前端异步用得特别多,如果不是异步的程序,你都不...

范大脚脚
2017/11/03
0
0
学习 easyui 之四:禁用 linkbutton 问题之后,颜色变灰,但是还能执行onclick事件

1.问题的起源 linkbutton 是 easyui 中常用的一个控件,我们可以使用它创建按钮。用法很简单,使用 a 元素,标记上 easyui-linkbutton 的类就可以看到按钮了。 <a id="btn" class="easyui-li...

文文1
2016/08/26
1K
0
jquery中remove()与detach()的区别

说到删除节点,马上就会想到remove,不过原来还有一个detach,而且它们还是有区别的,就是detach保留了jquery的数据,而remove就会完全删除干净。所以如果在删除一个dom节点后还想保留它的数...

随智阔
2013/07/08
79
0
A-Frame.js 学习&文档翻译(一)实体

A-Frame是什么 A-Frame是Mozilla 开源 web 虚拟现实框架,他能够非常方便的创建VR视口,载入部分格式的模型,设置照相机等,这为对计算机图形学不是很了解的同学,减轻了好多负担。我分别用了...

mooonx
2017/04/29
0
0
【Vue原理】Event - 白话版

写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得排版...

神仙朱
07/10
10
0

没有更多内容

加载失败,请刷新页面

加载更多

02.日志系统:一条SQL更新语句是如何执行的?

我们还是从一个表的一条更新语句说起,我们创建下面一张表: create table T(ID int primary key, c int); 如果要将ID=2这一行c的值加1,SQL可以这么写: update T set c=c+1 where ID=2; 前...

scgaopan
今天
9
0
【五分钟系列】掌握vscode调试技巧

调试前端js 准备一个前端项目 index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1......

aoping
今天
8
0
PhotoShop 高级应用:USM锐化/S锐化/防抖

、 高反差锐化+混合模式:叠加模式 【将更多的边缘细节添加到图像中】

东方墨天
今天
9
0
Python数据可视化之matplotlib

常用模块导入 import numpy as npimport matplotlibimport matplotlib.mlab as mlabimport matplotlib.pyplot as pltimport matplotlib.font_manager as fmfrom mpl_toolkits.mplot3d i......

松鼠大帝
昨天
7
0
我用Bash编写了一个扫雷游戏

我在编程教学方面不是专家,但当我想更好掌握某一样东西时,会试着找出让自己乐在其中的方法。比方说,当我想在 shell 编程方面更进一步时,我决定用 Bash 编写一个扫雷游戏来加以练习。 我在...

老孟的Linux私房菜
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部