深入了解javascript事件 -自定义事件绑定

上一节分析了3种的事件绑定的优缺点，今天我们来写一个通用的能适合各种浏览器的事件绑定函数。

这里我们不重新写了，综合网上各种比较好的通用事件绑定函数，我这里采用大师 Dean Edwards事件绑定代码,请大家详细看下面的注释

   

  function addEvent(element, type, handler) {
             // 给函数分配唯一的标志ID
             if (!handler.$$guid) handler.$$guid = addEvent.guid++;
             // 创建一个hash table来保存各种事件的处理函数  
             if (!element.events) element.events = {};
             // 创建一个hash table来保存某个事件处理函数
             var handlers = element.events[type];
             if (!handlers) {
                handlers = element.events[type] = {};
                 // 储存已经存在的事件处理函数
                 if (element["on" + type]) {
                    handlers[0] = element["on" + type];
                }
            }
             //  保存时间处理函数到hash table中
            handlers[handler.$$guid] = handler;
             //  为事件提供一个统一全局的处理函数 这句是关键handleEvent函数属于element，也就是说函数的内部this是指向element
            element["on" + type] = handleEvent;
        };
        addEvent.guid = 1;
         function removeEvent(element, type, handler) {
             //  移除 
             if (element.events && element.events[type]) {
                 delete element.events[type][handler.$$guid];
            } 
        };
         function handleEvent(event) {
            // 获取事件对象
            event = event || window.event;
             //  注意这里的this指向dom元素 因为addEvent中element["on" + type] = handleEvent
              // 获取已经缓存到dom元素的events属性的各个事件函数
             var handlers =  this.events[event.type];
             // 遍历各个函数
             for ( var i  in handlers) {
                 //  注意这里的this指向dom元素 所有实际的处理函数变成element的一个内部处理函数 
                 //  所以函数内部this指向dom元素
                 this.$$handleEvent = handlers[i];
                 // 触发函数
                 this.$$handleEvent(event);
            } 
        };  

 

使用方法代码如下：

   
  < script  type ="text/javascript" >

        window.onload =  function () {
             var tt = document.getElementById("sfs");
       
            addEvent(tt, "click", t1);
            addEvent(tt, "click", t2);
        }
         function t1() {
             var i =  this;
        }
         function t2() {
             var i =  this;
        }

         function addEvent(element, type, handler) {
             // 给函数分配唯一的标志ID
             if (!handler.$$guid) handler.$$guid = addEvent.guid++;
             // 创建一个hash table来保存各种事件的处理函数  
             if (!element.events) element.events = {};
             // 创建一个hash table来保存某个事件处理函数
             var handlers = element.events[type];
             if (!handlers) {
                handlers = element.events[type] = {};
                 // 储存已经存在的事件处理函数
                 if (element["on" + type]) {
                    handlers[0] = element["on" + type];
                }
            }
             //  保存时间处理函数到hash table中
            handlers[handler.$$guid] = handler;
             //  为事件提供一个统一全局的处理函数 这句是关键handleEvent函数属于element，也就是说函数的内部this是指向element
            element["on" + type] = handleEvent;
        };
        addEvent.guid = 1;
         function removeEvent(element, type, handler) {
             //  移除 
             if (element.events && element.events[type]) {
                 delete element.events[type][handler.$$guid];
            } 
        };
         function handleEvent(event) {
            // 获取事件对象
            event = event || window.event;
             //  注意这里的this指向dom元素 因为addEvent中element["on" + type] = handleEvent
              // 获取已经缓存到dom元素的events属性的各个事件函数
             var handlers =  this.events[event.type];
             // 遍历各个函数
             for ( var i  in handlers) {
                 //  注意这里的this指向dom元素 所有实际的处理函数变成element的一个内部处理函数 
                 //  所以函数内部this指向dom元素
                 this.$$handleEvent = handlers[i];
                 // 触发函数
                 this.$$handleEvent(event);
            } 
        };  
     </ script >
</ head >
< body >
   < div   style =" height:800px; width:800px; background:red; border:20px solid black; padding:50px;" >
   < div   id ="sfs"  style ="height:200px; width:200px; background:green; position:relative; " >safsasafss </ div >

  </div>