资讯专栏INFORMATION COLUMN

与JavaScript恋爱之关于DOM对象相关的兼容封装(一)

Shihira / 717人阅读

摘要:兼容获取指定对象下具有指定类名的对象参数为父节点对象,为类名当没有传入指定的父节点对象时默认获取下所有的指定类事件绑定兼容需要绑定事件的元素,事件类型,执行函数级及以下级

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

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);
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91321.html

相关文章

  • JavaScript恋爱数组(

    摘要:一认识数组数组是值的有序集合。每一个值叫一个元素,每一个元素在数组中有一个位置,以数字表示,叫做索引。数组的索引类似于对象的属性名等价于每个实例数组都继承自中的属性。构造函数传入多个参数时参数为元素。 一、认识数组数组是值的有序集合。每一个值叫一个元素,每一个元素在数组中有一个位置,以数字表示,叫做索引。第一个元素的索引为0,数组有一个length属性,为数组的元素个数,length比...

    fantix 评论0 收藏0
  • JavaScript恋爱数组(三)

    摘要:一循环使用参数为对象,返回一个数组,为对象属性名的集合不可枚举的除外。 数组循环数组循环方法:for循环,forEach(),for/in。一、for循环1.使用Object.keys()参数为对象,返回一个数组,为对象属性名的集合(不可枚举的除外)。IE8+,然后使用for循环得到对象的值的集合。 var o={a:1,b:2,c:3}; Object.defineProperty(...

    mengera88 评论0 收藏0
  • JS干货| 浏览器缺陷、浏览器缺陷修复等五大开发问题解决

    摘要:图对可复用代码挑战最大的五项问题五大开发问题如下。浏览器的缺陷修复。浏览器缺失的功能。复杂的地方是,当前浏览器会在未来的浏览器版本中被修复。假设浏览器引起常见的网站问题为解决浏览器使用特殊技巧,将来浏览器发布新版本修复了,就会出现问题。 任意一段重要的代码都需要关注无数的开发问题。但是,其中对可复用JavaScript代码挑战最大的五项问题如图14.2所示。 showImg(https...

    qiangdada 评论0 收藏0
  • JavaScript恋爱对象序列化

    摘要:对象序列化是指对象状态转为字符串,也可以将字符串还原为对象。提供了和两个方法使用该方法序列化对象。只能序列化对象的可枚举的属性,对于一个不能序列化的属性将在对象序列化后生成的字符串中省略掉这个属性。 对象序列化是指对象状态转为字符串,也可以将字符串还原为对象。ECMAScript5提供了JSON.stringify()和JSON.parse()两个方法:1、JSON.stringify...

    includecmath 评论0 收藏0
  • JavaScript恋爱对象三个属性

    摘要:为要检测的对象构造函数创建的对象继承了一个叫的属性,该属性指代该构造函数,即的原型。使用直接量创建的对象,也有一个叫的属性,该属性指代构造函数,所以直接量创建的对象的真正原型是,使用方法来检测对象的原型并不可靠,在以后的文章中会提到。 一、原型属性 1、对象的原型属性是用来继承属性的,这个属性如此重要,我们通常称为:对象的原型属性或对象的原型。对象的原型是在对象实例化的时候就设置好的...

    wanglu1209 评论0 收藏0

发表评论

0条评论

Shihira

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<