JavaScript事件绑定方法

简单实用版：                                                                                        

function bind(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版：                                                                                                   
功能非常强悍，解决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[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;
};

 

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[i],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[i],type,fn);
    }
   }else{
    el.attachEvent(‘on‘+type,function(){
     return fn.call(el,window.event);
    });
   }
  };
 }
})();