与JavaScript恋爱之关于DOM对象相关的兼容封装（一）-优快云博客

本文介绍了一种兼容多种浏览器的DOM操作方法，用于获取指定类名的DOM元素集合，并提供了一个兼容不同浏览器事件绑定机制的实用工具。该工具简化了事件绑定过程，支持DOM2级、IE8及以下版本和DOM0级的事件绑定。

1、兼容获取指定DOM对象下具有指定类名的DOM对象

//参数：parentNode为父节点对象，className为class类名
//当没有传入指定的父节点对象时,默认获取document下所有的指定类
function getClass(parentNode,className){ 
    var parentObj=parentNode||document; 
    var childrens=parentObj.getElementsByTagName("*");
    var reg=new RegExp("(\\s+|^)"+className+"(\\s+|$)");
    var arr=[];
    for(var i=0;i<childrens.length;i++){
       if(reg.test(childrens[i].className)){
            arr.push(childrens[i]);
       }                                 
    }
    return arr;
}

2、事件绑定兼容

//element需要绑定事件的元素，type事件类型，handler执行函数
var eventBind={
        getEvent:function(event){
                return event?event:window.event;
        },
    addEvent:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);//DOM2级
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler); //IE8及以下
        }else{
            element["on"+type]=handler; //DOM0级
        }
    },
    removeEvent:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type]=null;
        }
    },
    getTarget:function(event){
                return event.target?event.target:event.srcElement;
        },
    propagation:function(event){
               if(event.propagation){
                    return event.propagation();
               }else{
                    return event.cancelBubble=true;
               }
        },
    preventDefault:function(event){
               if(event.preventDefault){
                    return event.preventDefautl();
               }else{
                    return event.returnValue=false;
               }
        }
};
eventBind.addEvent(domObj,"click",getHtml); 
function getHtml(event){
   var event=event||window.event;
   console.log(event.target.innerHTML);
}