原生JS--各种兼容性写法总结

<script>
    var oEvent = evt || event;
=========================================================================

    var oP1 = oP.previousElementSibling || oP.previousSibling;
    var oP1 = oP.nextElementSibling || oP.nextSibling;

    var oLi = oUl.firstElementChild || oUl.firstChild;
    var oLi = oUl.lastElementChild || oUl.lastChild;

=========================================================================

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

=========================================================================

    if (oDiv.setCapture)    //捕捉事件
    {
        oDiv.setCapture();
    }

     if (oDiv.releaseCapture)    //释放事件
     {
        oDiv.releaseCapture();
    }

=========================================================================

    oInput.onpropertychange = oInput.oninput = function () 
    {
        alert(this.value);
    };

=========================================================================

    // 事件绑定的封装
    function addEvent (obj,type,fn) {
        if (obj.addEventListener) {        //在高级浏览器
             obj.addEventListener(type,fn,false);
        } else {
            obj.attachEvent('on'+type,fn)
        }
    }
    //事件移除的封装
    function removeEvent(obj,type,fn) {
        if (obj.removeEventListener) {
            obj.removeEventListener(type,fn,false);
        } else {
            obj.detachEvent('on'+type,fn);
        }
    }
    //移除事件的时候，最好不要写匿名函数，应该将事件函数单独抽出来，在绑定事件的方法里面写上函数名

=========================================================================


//鼠标滚轮事件：
//onmousewheel 赋值的方式添加 【兼容chrome  IE】
//DOMMouseScroll 绑定的方式添加  【兼容firefox】

//事件对象：
//oEvent.detail        【兼容firefox】
//oEvent.wheelDelta        【兼容chrome  IE】

function fn (ev) {
    var oEvent = ev || event;

    if (oEvent.wheelDelta) {
        //chrome IE
        if (oEvent.wheelDelta > 0) {
            ......    //向上滚
        } else {
            ......    //向下滚
        }
    } else {
        // Firefox
        if (oEvent.detail > 0) {
            ......    //向下
        } else {
            ......    //向上
        }
    }
};

//判断浏览器的类型
if (navigator.userAgent.indexOf('Firefox') != -1) {
        addEvent(oImg,'DOMMouseScroll',fn);        //addEvent是自己封装的绑定兼容写法
    } else {
        oImg.onmousewheel = fn;
    }

=========================================================================


/*只要是DOM0级事件，return false可以阻止各个浏览器的默认事件
在DOM2级事件里面，return false只能阻止低版本浏览器的默认事件;
在高级浏览器里面，通过preventDefault()方法阻止默认事件，属于事件对象的*/

    
    if(oEvent.preventDefault){
        oEvent.preventDefault();
    }

    // 或者简写成 oEvent.preventDefault && oEvent.preventDefault();

    return false;

=========================================================================

//封装ready
function addReady(fn) {
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded',fn,false);
    } else {
        document.attachEvent('onreadystatechange',function(){
        if (document.readyState == 'complete') {
                fn();
            }
        });
    }
}

=========================================================================


事件对象的属性：
srcElement: 获取到事件真正作用的那个元素 【IE】
target: 获取到事件真正作用的那个元素 【高级浏览器】

var oLi = oEvent.srcElement || oEvent.target;

</script>