模拟jQuery的事件兼容

Posted by VickyWu on August 12, 2016

JS兼容处理 1、模拟jquery的事件兼容处理(事件、事件对象)

on: function (eventNmae, fn) {
            this.each(function () {
                var self = this;
                if (support.addEventListener) {
                    this.addEventListener(eventNmae, fn, false);
                } else if (support.attachEvent) {
                    this.attachEvent("on" + eventNmae, function ()                      {
                        fn.call(self, window.event);
                    })
                } else {
                    var name = "on" + eventNmae,
                        oldFn = this[name];
                    if (oldFn.nodeType !== "function") {
                        this[name] = function (e) {
                            var event = e || window.event;
                            fn.call(self, event);
                        };
                    } else {
                        this[name] = function (e) {
                            var event = e || window.event;
                            oldFn(event);
                            fn.call(self, event);
                        }
                    }
                }
                return this;
            });
        },
off: function (eventNmae, fn) {
            this.each(function () {
                if (support.removeEventListener) {
                    this.removeEventListener(eventNmae, fn, false);
                } else if (support.detachEvent) {
                    this.detachEvent("on" + eventNmae, fn, false)
                } else {
                    var name = "on" + eventNmae;
                    this[name] = null;
                }
                return this;
            });
        }

2、trim

trim: function (str) {
            if (String.prototype.trim) {
                return str.trim();
            } else {
                return str.replace(/^\s+|\s+$/, "");
            }
        }

3、nextSibling

nextSibling: function (node) {
            while (node = node.nextSibling) {
                if (node.nodeType === 1) {
                    return node;
                }
            }
            return null;
        }

4、nextSiblingAll

nextSiblingAll: function (node) {
            var arr = [];
            while (node = node.nextSibling) {
                if (node.nodeType === 1) {
                    arr.push(node);
                }
            }
            return arr;
        }

5、push(IE8不支持aplly方法中的第二个参数是 伪数组)

var push = [].push;
try {
    // 判断 push 是否可用
    var container = document.createElement("div");
    container.innerHTML = "<p></p><p></p>";
    push.apply([], container.childNodes);
} catch(e) {
    // push不可用,则自己实现
    push = {
        apply: function(target, els) {
            var j = target.length;
                i = 0;
            while(target[j++] = els[i++]) {}
            target.length = j - 1;
        }
    };
} finally {
    container = null;
}

6、textContext与innerText

getTxtContent: function (node) {
            var cNodes = node.childNodes,
                array = [];
            whs.each(cNodes, function () {
                if (this.nodeType === 3) {
                    array.push(this.nodeValue);//文本节点的内容
                } else if (this.nodeType === 1) {
                    array = array.concat(getTxtContent(this));
                }
            })
            return array;
        }




 text: function (str) {
            if (typeof str === "undefined") {//获取
                var array = [];
                if ("textContent" in this[0]) {//textContent是属性
                    this.each(function () {
                        array.push(this.textContent)
                    });
                } else {

                    this.each(function () {
                        array.push(whs.getTxtContent(this));
                    })
                }
                return array.join("");
            }
            //设置
            if ("textContent" in this[0]) {
                this.each(function () {
                    this.textContent=str;
                });
            } else {
                this.each(function () {
                    this.innerHTML="";
                    var txtNode=document.createTextNode(str);
                    this.appendChild(txtNode);
                })
            }
        }