`

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);
}
分享到:
评论

相关推荐

    jQuery技巧之让任何组件都支持类似DOM的事件管理

    在JavaScript的世界里,DOM事件管理是开发者们常用的一种机制,它允许我们响应用户与页面元素的交互。然而,当我们处理非DOM对象,如自定义组件或业务对象时,DOM事件模型并不适用。本文将探讨如何利用jQuery实现一...

    手写DOM事件模型

    **手写DOM事件模型** 在Web开发中,DOM(Document Object Model)事件模型是JavaScript与网页交互的关键。它允许我们监听、处理和触发各种用户或浏览器产生的事件,如点击、鼠标移动、键盘输入等。本篇文章将深入...

    javascript中dom的基础概念.pdf

    事件注册是指将一个事件处理程序挂载到某个事件上的过程。例如,使用 onclick 事件可以注册一个点击事件处理程序,以便在用户点击某个元素时执行该函数。 事件流 事件流是指当某个事件发生时,哪些元素会监听到该...

    dom4j基于xml做数据库的登录与注册 动态验证码

    SAX是事件驱动的,适合处理大型XML文档,而DOM则将整个XML文档加载到内存中形成一个树形结构,便于遍历和操作。在登录与注册场景中,可能更倾向于使用DOM,因为它允许方便地查找和修改特定的元素和属性。 3. **XML...

    dom4j下sax解析xml

    4. **注册事件处理器**:创建一个实现`ContentHandler`接口的类,重写其中的方法,如`startElement`、`endElement`等,这些方法将在解析过程中被调用。 5. **读取XML文件**:`reader.read(new File("path_to_xml_...

    JavaScrpt DOMscripting编程艺术

    8. **DOM事件冒泡与捕获**:事件流的两种模式,理解它们对于处理复杂事件交互至关重要。冒泡是从最深的节点开始向上逐级传播事件,而捕获则从文档根节点向下到目标节点。 9. **DOMContentLoaded和load事件**:...

    DOM4J帮助文档及使用教程

    8. **事件处理**:如果需要在解析或操作XML时执行某些动作,可以注册监听器或处理器,DOM4J提供了相应的API。 9. **高级功能**:包括命名空间管理、DTD处理、实体引用、XML Schema支持等进阶话题。 10. **性能优化...

    dom,dom4j,sax 解析xml文件实例

    创建`SAXParserFactory`,设置解析器并注册事件处理器,最后调用`parse()`方法。例如: ```java SAXParserFactory factory = SAXParserFactory.newInstance(); SAXParser parser = factory.newSAXParser(); ...

    dom4jjar包

    6. **事件处理**:DOM4J支持事件处理,允许开发者在解析XML时注册监听器,对解析过程中的事件进行响应。 7. **XML Schema支持**:DOM4J还支持XML Schema,可以用于验证XML文档是否符合预定义的规范。 8. **与其他...

    dom+dom4J+SAX 解析

    SAX解析器在读取XML时,程序员需要注册事件处理器来响应这些事件。这种方式适用于处理大型XML文件,因为它占用的内存较小。但是,由于是基于事件的,处理复杂的XML结构可能较为困难,需要编写更多的代码。 在...

    dom4j所需要的所有jar包

    5. **事件处理**:DOM4J支持SAX事件驱动的解析,可以在解析过程中处理事件,如元素开始、元素结束、字符数据等,这对于处理大型XML文档时节省内存非常有用。 6. **文档构建**:DOM4J提供了一种流式构建XML文档的...

    dom4j源代码

    8. **事件处理**:DOM4J允许注册事件处理器,可以监听XML解析过程中的特定事件,如开始解析、遇到元素、结束解析等。 9. **性能优化**:DOM4J在设计时考虑了性能,例如通过延迟加载(lazy loading)减少内存占用,...

    dom4j-1.6.1

    4. **事件驱动编程**:DOM4J支持事件驱动的XML解析,可以注册事件处理器来响应XML解析过程中的特定事件,如元素开始、结束、文本节点发现等。 5. **文档操作**:DOM4J提供了创建、修改和删除XML文档节点的功能,...

    易语言源码易语言DOM操作源码.rar

    4. **事件处理**:易语言中如何注册和触发DOM事件,实现动态响应文档变化。 5. **XPATH查询**:理解如何使用XPath表达式在易语言中定位DOM元素,快速找到目标节点。 6. **DOM加载与序列化**:学习如何从HTML或XML...

    DOM文档下载

    4. **事件处理**: DOM还支持事件监听,可以使用`addEventListener`来注册事件处理函数,当指定的事件发生时,该函数会被调用。对应的移除事件监听的方法是`removeEventListener`。 5. **遍历DOM**: `childNodes`...

    JS中dom0级事件和dom2级事件的区别介绍

    DOM0级事件和DOM2级事件是JavaScript中处理事件的不同方式,主要差异在于事件处理程序的注册、执行顺序以及事件的可复用性。这里我们将深入探讨这两种事件处理机制。 首先,DOM0级事件处理是JavaScript早期的标准,...

    dom4j使用

    - 实现`ContentHandler`接口并注册到`SAXReader`,即可处理解析事件。 在实际开发中,DOM4J常与其他技术结合使用,如Spring框架中的XML配置文件解析,或者与XSLT进行XML到XML的转换。标签中提到的“源码”可能指的...

Global site tag (gtag.js) - Google Analytics