浏览器差异

移动端浏览器没报错无法看报错信息
移动端真机调试，引入vconsole

<script src="vconsole.min.js"></script>
<script>
  var vConsole = new VConsole();
</script> 

　　

 

Array.prototype.slice.call(document.getElementById("test").childNodes);
用上面的方法可以把 id 为 test 的子节点转换成数组

IE8及之前不能直接这样使用

解决方案

function toArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes);    //非IE
    } catch (e) {
        array = new Array();
        for (var i = 0; i < nodes.length; i++) {
            array.push(nodes[i]);
        }
    }
    return array;
}

　　

事件处理
IE8及之前不支持addEventListener。同时IE8及之前只支持时间冒泡，通过attachEvent()添加的事件程序会被添加到冒泡阶段。

attachEvent和addEventListener 比较相似，除了attachEvent的事件参数都需要加上on ，事件触发的this指向的是window而不是被触发的元素作用域，绑定多个事件时顺序从后往前执行（和js原本的执行顺序相反）。

解决方案

/*
    * element传入的是获取到的元素 
    * type传入的是监听的事件
    * handler传入的是触发的函数
*/
var EventUtil = {
    addHandler: function(element, type, handler) {
        if(element.addEventListener) {
            element.addEventListener(type, handler);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler) {
        if(element.removeEventListener) {
            element.removeEventListener(type, handler);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
}

　　

事件对象属性差别
IE中的事件对象是window.event，同时event.srcElement与DOM中的event.target相同。DOM 0级中，等于this。在DOM 2级中不等于this。

var myBtn = document.getElementById('myBtn');
myBtn.onclick = function(){
    console.log(this.innerText);    //正常内容，此时this指向window.event.srcElement
};
myBtn.attachEvent('onclick', function(event){
    console.log(this.innerText);    //undefinde，此时this指向的是document对象
});

　　

IE的event.cancelBubble属性(赋值为true或false) 和 DOM里的event.stopPropagation() 相同

IE的event.returnValue属性(赋值为true或false) 和 DOM里的event.preventDefault() 相同

兼容性解决方案：

var EventUtil = {
    getEvent: function(e) {
        return e ? e : window.event;
    },
    getTarget: function(e) {
        return e.target: e.srcElement; 
    },
    preventDefault: function(e) {
        if(e.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(e) {
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

btn.onclick = function(e) {
    e = EventUtil.getEvent;
    EventUtil.stopPropagation(e);
}

　　

事件区别

鼠标滚轮事件

大部分浏览器中滚轮事件为mousewheel，FireFox里是DOMMouseScroll。
同时mousewheel往前是120的倍数，往后是-120的倍数。
但是在FireFox里，往前滚是-3的倍数，往后滚是3的倍数。数值乘上40再将正负数对换解决兼容问题。

键盘事件

除了FireFox，向上键、向下键等特殊键不会触发keypress事件。

现代浏览器按键字符编码是event.keyCode，IE8及之前用的是event.charCode。

event.keyCode在Firefox里，字母及数字都为0，向上键、向下键等特殊键显示字符编码。而event.which 则是向上键向下键等特殊键都为0，字母及数字正常显示字符编码。