JavaScript事件绑定方法
简单实用版:function bind(elm, evType, fn, useCapture) { if (elm.addEventListener) {elm.addEventListener(evType, fn, useCapture);//DOM2.0return true; }else if (elm.attachEvent) {var r = elm.attachEvent('on' + evType, fn);//IE5+return r; }else {elm['on' + evType] = fn;//DOM 0 }}
Dean Edwards版:
功能非常强悍,解决IE的this指向问题,event总是作为第一个参数传入,跨浏览器就更不在话下。
function bind(element, type, handler) { //为每一个事件处理函数分派一个唯一的ID if (!handler.$$guid) handler.$$guid = addEvent.guid++; //为元素的事件类型创建一个哈希表 if (!element.events) element.events = {}; //为每一个"元素/事件"对创建一个事件处理程序的哈希表 var handlers = element.events; if (!handlers) {handlers = element.events = {};//存储存在的事件处理函数(如果有)if (element["on" + type]) { handlers = element["on" + type];} } //将事件处理函数存入哈希表 handlers = handler; //指派一个全局的事件处理函数来做所有的工作 element["on" + type] = handleEvent;};//用来创建唯一的ID的计数器addEvent.guid = 1;function removeEvent(element, type, handler) { //从哈希表中删除事件处理函数 if (element.events && element.events) {delete element.events; }};function handleEvent(event) { var returnValue = true; //抓获事件对象(IE使用全局事件对象) event = event || fixEvent(window.event); //取得事件处理函数的哈希表的引用 var handlers = this.events; //执行每一个处理函数 for (var i in handlers) {this.$$handleEvent = handlers;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;};
HTML5版:
var addEvent=(function(){ if(document.addEventListener){return function(el,type,fn){ if(el.length){ for(var i=0;i<el.length;i++){ addEvent(el,type,fn); } }else{ el.addEventListener(type,fn,false); }}; }else{return function(el,type,fn){ if(el.length){ for(var i=0;i<el.length;i++){ addEvent(el,type,fn); } }else{ el.attachEvent(‘on‘+type,function(){ return fn.call(el,window.event); }); }}; }})();
页:
[1]