常用跨浏览器设置——JS总结

最新推荐文章于 2024-08-07 09:14:48 发布

原创最新推荐文章于 2024-08-07 09:14:48 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #跨浏览器抽象事件

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文总结了JS中常见的跨浏览器设置，包括事件监听、字符编码、窗口大小获取、滚动条位置获取等核心功能，提供了封装抽象后的函数实现，方便开发者在不同浏览器环境下统一操作。

常用跨浏览器设置——JS总结

1.跨浏览器添加事件

        function addEvent(obj,type,fn) {
            if (obj.addEventListener) {
                obj.addEventListener(type,fn,false);
            } else if (obj.attachEvent) {
                obj.attachEvent('on' + type, fn);
            }
        }

2.跨浏览器移除事件

        function removeEvent(obj,type,fn) {
            if (obj.removeEventListener) {
                obj.removeEventListener(type,fn,false);
            } else if ( obj.detachEvent) {
                obj.detachEvent('on' + type,fn);
            }
        }

3.跨浏览器字符编码

        function getCharCode(evt) {
            var e = evt || window.event ;
            if (typeof e.charCode == 'number') {
                return e.charCode;
            } else {
                return e.keyCode;
            }
        }

4.跨浏览器获取可视范围内窗口大小

        function getInner() {
            if(typeof window.innerWidth != 'undefined'){
                return {					              //属性试-封装
                    width:window.innerWidth,
                    height:window.innerHeight
                }
            } else {
                return {
                    width:document.documentElement.clientWidth,
                    height:document.documentElement.clientHeight
                }
            }	
        }

5.跨浏览器获取滚动条位置

        function getScroll(){
            return{
                top:document.documentElement.scrollTop || document.bady.scrollTop,
                left:document.documentElement.scrollLeft || document.body.scrollLeft
            }
        }

封装——抽象

通过抽象、封装而得到像公式一样的函数体，很多功能函数，语言本身没有给出，但给出了基本获取方法，我们需要的功能可能还需要进行适当的拼装和使用适当的算法处理，最终得到适宜我们使用的函数。