`

大师推荐的经典方法(持续更新)

阅读更多
目录:

1, John Resig自己获奖的addEvent/removeEvent方法;
2, Jeremy Keith的load方法;
3, Dean Edwards修改版的addEvent/removeEvent方法。




1, 下面是JQuery之父推荐的添加移除事件方法。

/*
*obj    要绑定事件的对象
*type   事件类型,指"click", "load", "submit", "mouseover"等
*fn     函数名
*/
function addEvent( obj, type, fn )
{
   if ( obj.attachEvent )
   {
      obj['e' + type + fn] = fn;
      obj[type + fn] = function()
      {        
         obj['e' + type + fn]( window.event );
      }
      obj.attachEvent( 'on' + type, obj[type + fn] );
   }
   else
   obj.addEventListener( type, fn, false );
}
/*
*obj    要删除事件的对象
*type   事件类型,指"click", "load", "submit", "mouseover"等
*fn     函数名
*/
function removeEvent( obj, type, fn )
{
   if ( obj.detachEvent )
   {
      obj.detachEvent( 'on' + type, obj[type + fn] );
      obj[type + fn] = null;
   }
   else
   obj.removeEventListener( type, fn, false );
}


//addEvent( document.getElementById('foo'), 'click', doSomething );


我都没怎么翻译,大家可以看原文:http://ejohn.org/apps/jselect/event.html。

2, 下面是在Dom Scripting书上介绍的添加启动事件的方法addLoadEvent(func)。
<script language="javascript" type="text/javascript">

function addLoadEvent(func)
{
   var oldonload = window.onload;

   if (typeof window.onload != 'function')
   {
      window.onload = func;
   }
   else
   {
      window.onload = function()
      {
         oldonload();
         func();
      }
   }
}

function event1() {alert("function 1!");}
function event2() {alert("function 2!");}
function event3() {alert("function 3!");}
function event4() {alert("function 4!");}
function event5(msg) {alert(msg)}

addLoadEvent(event1);
addLoadEvent(event2);
addLoadEvent(event3);
addLoadEvent(event4);
//参数传递的方式
addLoadEvent(function(){ event5('myArgument') });

</script>


3, 周六借了本《Pro JavaScript Techniques》来看,没有想到John Resig大大推荐了Dean Edwards的addEvent()方法,而没推荐自己更精简的作品,他这样评价Edwards的addEvent()的:
1, 可以在所有浏览器中工作,就算是古老得无任何支持的浏览器;
2, this关键字可在所有的绑定函数中使用,指向的是当前元素;
3, 中和了所有防止浏览器默认行为和阻止事件冒泡的各种浏览器特定函数;
4, 不管浏览器类型,事件对象总是作为第一个对象传入;
5, 唯一缺点是仅工作在冒泡阶段(因为深入使用事件绑定的传统方法)。
6, addEvent/removeEvent函数如此强大,绝对没有任何理由不在你的代码中使用。


而Dean Edwards这样说:
My solution is very different.

    * it performs no object detection
    * it does not use the addeventListener/attachEvent methods
    * it keeps the correct scope (the this keyword)
    * it passes the event object correctly
    * it is entirely cross-browser (it will probably work on IE4 and NS4)
    * and from what I can tell it does not leak memory

下面是Dean Edwards的addEvent/removeEvent函数:

// http://dean.edwards.name/weblog/2005/10/add-event/

function addEvent(element, type, handler) {
	if (element.addEventListener) {
		element.addEventListener(type, handler, false);
	} else {
		// 为每一个事件处理函数赋予一个独立的ID
		if (!handler.$$guid) handler.$$guid = addEvent.guid++;
		// 为元素建立一个事件类型的Hash表
		if (!element.events) element.events = {};
		// 为每对元素/事件建立一个事件处理函数的Hash表
		var handlers = element.events[type];
		if (!handlers) {
			handlers = element.events[type] = {};
			// 存储已有的事件处理函数(如果已存在一个)
			if (element["on" + type]) {
				handlers[0] = element["on" + type];
			}
		}
		// 在Hash表中存储该事件处理函数
		handlers[handler.$$guid] = handler;
		// 赋予一个全局事件处理函数来处理所有工作
		element["on" + type] = handleEvent;
	}
};
// 创建独立ID的计数器
addEvent.guid = 1;

function removeEvent(element, type, handler) {
	if (element.removeEventListener) {
		element.removeEventListener(type, handler, false);
	} else {
		// 从Hash表中删除事件处理函数
		if (element.events && element.events[type]) {
			delete element.events[type][handler.$$guid];
		}
	}
};

function handleEvent(event) {
	var returnValue = true;
	// 获取事件处理对象(IE使用全局的事件对象)
	event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
	// 获取事件处理函数Hash表的引用
	var handlers = this.events[event.type];
	// 依次处理每个事件处理函数
	for (var i in handlers) {
		this.$$handleEvent = handlers[i];
		if (this.$$handleEvent(event) === false) {
			returnValue = false;
		}
	}
	return returnValue;
};
//增加一些IE事件对象的缺乏的方法
function fixEvent(event) {
	// 增加W3C标准事件方法
	event.preventDefault = fixEvent.preventDefault;
	event.stopPropagation = fixEvent.stopPropagation;
	return event;
};
fixEvent.preventDefault = function() {
	this.returnValue = false;
};
fixEvent.stopPropagation = function() {
	this.cancelBubble = true;
};
5
0
分享到:
评论

相关推荐

    SU日照大师

    而“SU日照大师”正是针对这一软件的扩展工具,为设计师们提供了一种全新的日照分析方法,将传统的时间与经验依赖性工作模式,转变为更为高效和精准的数据驱动分析。 “SU日照大师”的核心功能首先体现在日照模拟上...

    疯狂模渲大师不限时间版

    疯狂模渲大师一直致力于提高设计师的工作效率,更加为绘图者的便利操作持续努力着! 希望广大设计工作者,遇到问题要沉着应对,不要心浮气躁。要知道,找准所遇到3dmax问题的解决方法,才能把问题处理好。“病急乱...

    网维大师游戏不同步处理方法)同步节点

    本文将深入探讨如何使用“网维大师”来解决游戏不同步问题,特别是关于“同步节点”的处理方法。 首先,理解“同步节点”是非常关键的。在分布式系统中,同步节点是指负责协调和同步不同节点间数据的组件。在游戏...

    顶级销售大师经典案例.doc

    综上所述,顶级销售大师的成功秘诀在于深入了解自我和客户,有效管理客户信息,运用赞美和沟通技巧,保持积极的销售态度,持续学习和适应市场,关注并满足客户需求,以及灵活运用各种销售策略来建立长期的客户关系。...

    二维码大师

    在信息化高速发展的今天,二维码已经成为我们日常生活中不可或缺的一部分。它以其高效的信息传递方式、便捷的使用...在技术不断迭代更新的今天,二维码大师也将持续优化,为用户提供更好的服务,满足日益多样化的需求。

    测量坐标转换大师 坐标系转换

    - 在实际应用中,尊重版权,如果软件提供商业版本,应考虑购买以支持开发者持续更新和改进产品。 总的来说,《测量坐标转换大师》是测量工作中的实用工具,它简化了坐标转换的过程,提高了数据处理的效率。对于测量...

    清理大师-净网专家-电脑守护神

    【清理大师 - 净网专家 - 电脑守护神】是一款专注于个人计算机系统优化与清理的工具,旨在高效地清除系统中的垃圾文件,优化电脑性能,并强化用户的在线安全防护。随着个人电脑使用频率的提高,系统垃圾文件的积累也...

    CAD批量打印大师

    开发者对于软件的持续更新与技术支持也是该软件的一大优势。随着市场和用户需求的变化,软件能够及时修复存在的问题,并增加新的功能,以更好地服务设计人员的工作。 综上所述,CAD批量打印大师通过其高效的批量...

    网管大师(追踪者)-数据包抓取分析系统 V 1.281

    同时,持续关注软件更新,以获取最新的功能和安全补丁。 综上所述,"网管大师(追踪者)-数据包抓取分析系统 V 1.281"是网络管理中的得力助手,通过深入理解和熟练运用,我们可以提升网络运维的效率,保障网络的稳定...

    C#语法全解适合各类程序员,想了解C#的请下载,程序员必备,C#从入门到大师

    - 持续关注C#的新版本更新,如C# 9.0引入的模式匹配、可空引用类型等特性。 总之,“C#语法全解”将引导你全面掌握C#语言的核心概念和技术,助你成为C#编程的专家。无论是面向过程的编程思维,还是面向对象的设计...

    2021年草图大师最全模型库免费下载

    五、模型库的持续更新 草图溜溜网(www.caotu66.com)作为一个专门提供草图大师模型的平台,其资源丰富且更新频繁,为设计师提供了宝贵的在线资源。`.url`文件是一种快捷方式,可以直接打开该网站,方便用户查找和...

    IE参数修改大师

    作为一个不断更新和进步的软件,《IE参数修改大师》持续关注网络环境的变化,并且定期更新版本,以适应不断演变的网络威胁。开发者在每个新版本中都会添加新的防护机制,以增强软件的防护能力,确保用户在享受网络...

    惠普软件质量保证及持续改进

    本次报告旨在介绍惠普在软件质量保证及持续改进方面的方法论和实践经验。 #### 惠普的质量保证体系 惠普的质量保证体系分为三个层次:项目级、部门级以及组织级,每个层次都有其特定的目标和执行策略。 1. **项目...

    优化大师注册码(五组)

    综上所述,虽然题目中给出的“优化大师专业版注册码”看似能够免费解锁软件的高级功能,但从法律、安全等多个角度来看,这种方式并不值得推荐。建议用户通过正规渠道购买正版软件,既能享受完整的服务保障,又能支持...

    新增业务说明-星运大师

    4. **数据处理与分析**:如果"星运大师"涉及到星座运势的生成或个性化推荐,那么背后可能有大数据处理和机器学习的运用,比如Python的Pandas库进行数据清洗,Scikit-learn进行预测模型训练。 5. **服务器架构**:...

    Win7优化大师 V1.70 特有Win7正版免费一年

    6. **正版验证**:特别提及的是,Win7优化大师V1.70版本还包含了Win7正版一年免费服务,对于合法用户来说,这是一大福音,可确保系统持续获得官方更新和支持。 二、使用方法 1. **安装与启动**:首先下载Win7优化...

    土石方大师V200setupE.rar

    同时,开发者通常会提供持续的技术支持和软件更新,以修复已知问题,增强功能,适应新的行业标准。 总的来说,"土石方大师V200"是一款强大的工程计算工具,它简化了土石方工程的计算和管理,提高了工作效率,降低了...

    拷贝大师便携版.rar

    这样,在持续备份或更新大量数据时,可以显著减少拷贝时间和存储空间的需求。例如,如果你每天都在同一个目录下工作并保存新文件,增量拷贝只会拷贝当天新增或修改过的文件,而不是整个目录结构,节省了时间和资源。...

    seo大师之路

    在探讨“SEO大师之路”这一主题时,我们深入解析如何在寻找SEO工作时顺利通过面试,以及如何构建高质量的网站页面。SEO(Search Engine Optimization),即搜索引擎优化,是提升网站在搜索引擎结果页面上的自然排名...

    顺网VIP验证器验证平台网维大师7.6验证平台

    【顺网VIP验证器验证平台网维大师7.6】是一个专为顺网VIP用户提供服务的验证工具,它主要用于确保用户在使用特定...三层更新机制的采用,表明了开发者对于产品持续改进和安全性的重视,为用户提供了一流的使用体验。

Global site tag (gtag.js) - Google Analytics