美文网首页
跨浏览器的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

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