兼容处理

鼠标滚轮事件

<script>
    //火狐中的滚轮事件
    document.addEventListener("DOMMouseScroll", function (event) {
        alert(event.detail);//若前滚的话为 -3，后滚的话为 3
    }, false)
    //非火狐中的滚轮事件
    document.onmousewheel = function (event) {
        alert(event.detail);//前滚：120，后滚：-120
    }
</script>

event事件中的target

<script>
    document.οnmοuseοver = function (e) {
    var e = e || window.event;// 事件对象的兼容处理 e为一般浏览器 window.e是低版本IE的兼容语法
    var Target = e.target || e.srcElement;//获取target的兼容写法，后面的为IE
    var from = e.relatedTarget || e.formElement;//鼠标来的地方，同样后面的为IE...
    var to = e.relatedTarget || e.toElement;//鼠标去的地方
    }
</script>

阻止默认事件

<script>
    document.οnclick = function (e) {
    var e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();//W3C标准
    } else {
        e.returnValue = 'false';//IE..
    }
}
</script>

阻止事件传播

<script>
    document.οnclick = function (e) {
    var e = e || window.event;
    if (e.stopPropagation) {
        e.stopPropagation();//W3C标准
    } else {
        e.cancelBubble = true;//IE....
    }
}
</script>

设置监听事件

<script>
function addEvent(obj, type, fn) {//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);//非IE
    } else {
        obj.attachEvent('on' + type, fn);//ie,这里已经加上on，传参的时候注意不要重复加了
    };
}
function removeEvent(obj, type, fn) {//删除事件监听
    if (obj.removeEventListener) {
        obj.removeEventListener(type, fn, false);//非IE
    } else {
        obj.detachEvent('on' + type, fn);//ie，这里已经加上on，传参的时候注意不要重复加了
    };
}
</script>

获取元素的非行间样式值

<script>
    function getStyle(object, oCss) {
        if (object.currentStyle) {
            return object.currentStyle[oCss];//IE
        } else {
            return getComputedStyle(object, null)[oCss];//除了IE
        }
    }
</script>

event事件问题

<script>
    document.οnclick = function (ev) {//谷歌火狐的写法，IE9以上支持，往下不支持；
        var e = ev;
        console.log(e);
    }
    document.οnclick = function () {//谷歌和IE支持，火狐不支持；
        var e = event;
        console.log(e);
    }
    document.οnclick = function (ev) {//兼容写法；
        var e = ev || window.event;
        var mouseX = e.clientX;//鼠标X轴的坐标
        var mouseY = e.clientY;//鼠标Y轴的坐标
    }
</script>

页面可视窗口、上卷...

<script>
        //以下均可console.log()实验
        var winW = document.body.clientWidth || document.docuemntElement.clientWidth;//网页可见区域宽
        var winH = document.body.clientHeight || document.docuemntElement.clientHeight;//网页可见区域宽
        //以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框

        var winWW = document.body.scrollWidth || document.docuemntElement.scrollWidth;//整个网页的宽
        var winHH = document.body.scrollHeight || document.docuemntElement.scrollHeight;//整个网页的高

        var scrollHeight = document.body.scrollTop || document.docuemntElement.scrollTop;//网页被卷去的高
        var scrollLeft = document.body.scrollLeft || document.docuemntElement.scrollLeft;//网页左卷的距离

        var screenH = window.screen.height;//屏幕分辨率的高
        var screenW = window.screen.width;//屏幕分辨率的宽
        var screenX = window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox）
        var screenXX = window.screenX;//FireFox相对于屏幕的X坐标
        var screenY = window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）
        var screenYY = window.screenY;//FireFox相对于屏幕的y坐标
</script>