常用原生JS方法总结(兼容性写法)

更新日期: 2019-03-24阅读量: 1090标签: 方法

经常会用到原生js来写前端。。。但是原生js的一些方法在适应各个浏览器的时候写法有的也不怎么一样的。。。备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了。。。


①添加事件方法

addHandler:function(element,type,handler){
    if(element.addEventListener){//检测是否为DOM2级方法
        element.addEventListener(type, handler, false);
    }else if (element.attachEvent){//检测是否为IE级方法
        element.attachEvent("on" + type, handler);
    } else {//检测是否为DOM0级方法
        element["on" + type] = handler;
    }
}


②移除之前添加的事件方法

removeHandler: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;
       }
 }


③获取事件及事件对象目标

//获取事件对象的兼容性写法
 getEvent: function(event){
     return event ? event : window.event;
 },
 //获取事件对象目标的兼容性写法
 getTarget: function(event){
     return event.target || event.srcElement;
}


④阻止浏览器默认事件的兼容性写法

preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
}


⑤阻止事件冒泡的兼容性写法

stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
}


⑥mouseover和mouseout 事件才包含的获取相关元素的方法

//mouseover和mouseout 事件才包含的获取相关元素的方法
getRelatedTarget: function(event){
    if (event.relatedTarget){
        return event.relatedTarget;
    } else if (event.toElement){
        return event.toElement;
    } else if (event.fromElement){
        return event.fromElement;
    } else {
        return null;
    }
}


⑦鼠标滚轮判断

/*对于mousedown 和mouseup 事件来说,则在其event 对象存在一个button 属性,
表示按下或释放的按钮。DOM的button 属性可能有如下3 个值:0 表示主鼠标按钮,1 表示中间的鼠
标按钮(鼠标滚轮按钮),2 表示次鼠标按钮。在常规的设置中,主鼠标按钮就是鼠标左键,而次鼠标
按钮就是鼠标右键。
IE8 及之前版本也提供了button 属性,但这个属性的值与DOM 的button 属性有很大差异。
 0:表示没有按下按钮。
 1:表示按下了主鼠标按钮。
 2:表示按下了次鼠标按钮。
 3:表示同时按下了主、次鼠标按钮。
 4:表示按下了中间的鼠标按钮。
 5:表示同时按下了主鼠标按钮和中间的鼠标按钮。
 6:表示同时按下了次鼠标按钮和中间的鼠标按钮。
 7:表示同时按下了三个鼠标按钮。*/
getButton: function(event){
    if (document.implementation.hasFeature("MouseEvents", "2.0")){
        return event.button;
    } else {
        switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
            return 0;
            case 2:
            case 6:
            return 2;
            case 4:
            return 1;
        }
    }
}


⑧能够取得鼠标滚轮增量值(delta)的方法

getWheelDelta: function(event){
    if (event.wheelDelta){
        return (client.engine.opera && client.engine.opera < 9.5 ?
            -event.wheelDelta : event.wheelDelta);
    } else {
        return -event.detail * 40;//firefox中的值为+3表示向上滚,-3表示向下滚
    }
}


⑨跨浏览器的方式取得字符编码

getCharCode: function(event){
    if (typeof event.charCode == "number"){
        return event.charCode;
    } else {
        return event.keyCode;
    }
}


⑩访问剪贴板中的数据

getClipboardText: function(event){
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
}


11.设置剪贴板中的数据

setClipboardText: function(event, value){
        if (event.clipboardData){
            return event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            return window.clipboardData.setData("text", value);
        }
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/2509

js中math方法_整理js中常用的math方法总结

记录下与Math有关的常用方法,如:求最大值、最小值等,或者是保留几位数啥的。本文主要介绍了JavaScript中Math对象的方法,具有一定的参考价值,下面跟着小编一起来看下吧

js 操作剪贴板

是通过 js 操作 textarea input 输入框,只能操作输入框,不能操作其它元素。所有的 复制/剪切/粘贴 都是要在选中输入框中的文本之后,才进行操作的。

JS中toFixed()方法的四舍五入问题解决方法

最近发现JS当中toFixed()方法存在一些问题,采用原生的Number对象的原型对象上的toFixed()方法时,规则并不是所谓的四舍五入

什么是javascript的私有方法?

私有方法是只有父类可以访问的方法和属性,他与静态方法一致,只是表现形式不一样。构造器中的var变量和参数都是私有方法。私有成员由构造函数生成。构造函数的普通变量和参数成为私有成员。

Javascript中 toFixed

简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。但是不论引入toFixed解决浮点数计算精度缺失的问题也好,它有没有使用银行家舍入法也罢,都是为了解决精度的问题

JavaScript reduce() 方法

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 对于空数组是不会执行回调函数的。

vue cached、camelize方法理解

驼峰转换的主要原理,主要是replace方法的使用(以下内容主要针对当前例子,详细使用见:W3school:JavaScript replace() 方法或MDN:String.prototype.replace())

Number 常用方法汇总

toExponential()把对象的值转换为指数计数法。toFixed()把数字转换为字符串,并对小数点指定位数。toLocaleString()把数字转换为字符串,使用本地数字格式顺序。

js 实现二级联动

在web开发中我们经常会遇到页面的一个二级联动技术,二级联动字面解释就是说我在选择一级select不同的option,下面的二级option的属性值在进行相应的变化。

在一个JS文件中引用另一个JS文件的方法

在调用文件的顶部加入下例代码:document.write;我们可以在某个html中引用了你需要的js文件,我们可以通过拿到那个html文件的对象,然后在通过这个对象去引用js的方法。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!