美文网首页
跨浏览器的EventUtil&&StyleUti

跨浏览器的EventUtil&&StyleUti

作者: CoderGLM | 来源:发表于2016-04-26 17:02 被阅读23次

主要是解决了老顽固IE的问题。

EventUtil

  var EventUtil = {
        // 视能力分别使用dom0||dom2||IE方式 来绑定事件
        // 参数: 操作的元素,事件名称 ,事件处理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件类型、需要执行的函数、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                // 这里的event需要用function包裹,
                // 是为了调handler时的上下文为当前元素
                // addEventListener默认就是
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEnentListener) {
                element.removeEnentListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        }, 
        // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默认行为
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 获取事件目标
        getTarget : function(event) {
            return event.target || event.srcElement;
        }
    }; 

StyleUtil

var StyleUtil = {
  getStyleSheet: function(elem) {
    return elem.sheet || elem.styleSheet;
  },
  insertRule: function(sheet, selector, cssText, position) {
    if (sheet.insertRule) {
      sheet.insertRule(selector + "{" + cssText + "}", position); 
    } else if ( sheet.addRule ) {
      sheet.addRule(selector, cssText, position);
    }
  },
  removeRule: function( sheet, index ) {
    if (sheet.deleteRule) {
      sheet.deleteRule(index);
    } else if (sheet.removeRule) {
      sheet.removeRule(index);
    }
  }
};

参考


1、《javascript 高级程序设计(第3版)》
2、前端总结

相关文章

  • 跨浏览器的EventUtil&&StyleUti

    主要是解决了老顽固IE的问题。 EventUtil StyleUtil 参考 1、《javascript 高级程序...

  • JavaScript 经典实例收集整理

    跨浏览器添加事件 跨浏览器移除事件 跨浏览器阻止默认行为 跨浏览器获取目标对象 跨浏览器获取滚动条位置 跨浏览器获...

  • 网页设计 - 收藏集 - 掘金

    免费且又精致的 HTML/CSS 站点模板 - 前端 - 掘金&l...

  • 产生跨域的原因

    产生跨域的原因 浏览器的限制 跨域 XHR(XMLHttpRequest)请求 1、浏览器的限制 2、跨域 跨域概...

  • 2020-11-10 浏览器跨域

    谷歌浏览器(chrome)允许跨域设置的方法 什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器...

  • 前端使用nginx解决浏览器跨域

    一. 浏览器跨域 浏览器跨域限制,学名浏览器同源策略,其实是为了数据安全,由Netscape提出来限制浏览器访问跨...

  • 跨域的解决方式

    什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本,就是跨域名,跨端口,跨协议。它是由浏览器的同源策略造成的,是...

  • 焦点领动【功能升级】2020年4月第一周:新增全站AMP功能

    新增全站AMP功能 【AMP简介】AMP:Accelerated Mobile Pages,意思是移动页面加速。A...

  • 跨域设置整理

    什么是跨域 不同域名之间相互请求资源,就是跨域。常说的跨域问题,指的是浏览器不允许跨域请求。这是由于浏览器的同源策...

  • Cookie和Session

    cookie:Cookie是不能跨浏览器的。(很好理解,cookie保存在浏览器端,那么肯定是不能跨浏览器的。)c...

网友评论

      本文标题:跨浏览器的EventUtil&&StyleUti

      本文链接:https://www.haomeiwen.com/subject/epoqrttx.html