十个最常用的JavaScript自定义函数-JavaSript-爱易网页

十个最常用的JavaScript自定义函数

日期：2014-05-16　浏览次数：20350 次

10个最常用的JavaScript自定义函数

Java Script自定义函数在平时的开发过程中比较实用，这里介绍的是个最常用的十个JavaScript自定义函数主要涉及添加事件与移除事件等等。

(10)addEvent

网上最流行的版本是Scott Andrew的，据说javascript界曾举行一场比赛（此事件我们可以在Pro Javascript Techniques第100页看到）或浏览PPK的网站，征求添加事件与移除事件的函数，他就是其获奖者。下面就是他的实现：

function addEvent(elm, evType, fn, useCapture) { ?
?if (elm.addEventListener) {? ?
? elm.addEventListener(evType, fn, useCapture);//DOM2.0? ?
? return true;? ?
?}? ?
?else if (elm.attachEvent) {? ?
? var r = elm.attachEvent('on' + evType, fn);//IE5+? ?
? return r;? ?
?}? ?
?else {? ?
? elm['on' + evType] = fn;//DOM 0? ?
?}? ?
}

下面是Dean Edwards 的版本

// addEvent/removeEvent written by Dean Edwards, 2005 ?
// with input from Tino Zijdel ?
// http://dean.edwards.name/weblog/2005/10/add-event/ ?
function addEvent(element, type, handler) { ?
? //为每一个事件处理函数分派一个唯一的ID? ?
? if (!handler.$guid) handler.$guid = addEvent.guid++;? ?
? //为元素的事件类型创建一个哈希表? ?
? if (!element.events) element.events = {};? ?
? //为每一个"元素/事件"对创建一个事件处理程序的哈希表? ?
? var handlers = element.events[type];? ?
? if (!handlers) {? ?
?? ???handlers = element.events[type] = {};? ?
?? ???//存储存在的事件处理函数(如果有)? ?
?? ???if (element["on" + type]) {? ?
?? ?? ?? ?handlers[0] = element["on" + type];? ?
?? ???}? ?
? }? ?
? //将事件处理函数存入哈希表? ?
? handlers[handler.$guid] = handler;? ?
? //指派一个全局的事件处理函数来做所有的工作? ?
? element["on" + type] = handleEvent;? ?
}; ?
//用来创建唯一的ID的计数器 ?
addEvent.guid = 1; ?
function removeEvent(element, type, handler) { ?
? //从哈希表中删除事件处理函数? ?
? if (element.events && element.events[type]) {? ?
?? ???delete element.events[type][handler.$guid];? ?
? }? ?
}; ?
function handleEvent(event) { ?
? var returnValue = true;? ?
? //抓获事件对象(IE使用全局事件对象)? ?
? event = event || fixEvent(window.event);? ?
? //取得事件处理函数的哈希表的引用? ?
? 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;? ?
};

功能非常强悍，解决IE的this指向问题，event总是作为第一个参数传入，跨浏览器就更不在话下。

另，我还珍藏了一个HTML5工作组的版本：

var addEvent=(function(){ ?
? if(document.addEventListener){? ?
?? ???return function(el,type,fn){? ?
?? ?? ?? ?if(el.length){? ?
?? ?? ?? ?? ? for(var i=0;i??
?? ?? ?? ?? ?? ???addEvent(el[i],type,fn);? ?

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

十个最常用的JavaScript自定义函数

相关资料更多>

推荐阅读更多>