JS exist between different browsers compatible summary

February 19, 2016 Personal blog articles - move to segmentfault

When we write to handle the event in JS, taking into consideration Js code compatible across different browsers, the code is not easy to remember, so make the following order. (Of course, the future will increase updated ...)

Sample code is as follows:

(1) to prevent the default event

obj.onclick=function(ev){
        var event=ev||window.event;
        if(event.preventDefault){
            event.preventDefault();  /*W3C标准*/
        }else{
            event.returnValue=false;   /*兼容IE*/
        }
     }

Tip: return false; also can prevent the default event but to pay attention to the location.

(2) Get the next (on) a sibling node

function nextnode(obj){  /*获取下一个兄弟节点*/
        if (obj.nextElementSibling) {
            return obj.nextElementSibling;
        } else{
            return obj.nextSibling;
        }
    }
function prenode(obj){ /*获取上一个兄弟节点*/
 
        if (obj.previousElementSibling) {
            return obj.previousElementSibling;
        } else{
            return obj.previousSibling;
        }
    }

(3) obtaining a first child (the last one) node

function firstnode(obj){/*获取第一个子节点*/
        if (obj.firstElementChild) {
            return obj.firstElementChild;/*非IE678支持*/
        } else{
            return obj.firstChild;/*IE678支持*/
        }
    }
    function lastnode(obj){/*获取最后一个子节点*/
        if (obj.lastElementChild) {
            return obj.lastElementChild;/*非IE678支持*/
        } else{
            return obj.lastChild;/*IE678支持*/
        }
    }

(4) Add (remove) event listeners

function addEvent(obj,type,fn){ /*添加事件*/
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false); //非IE添加事件监听
        }else{
            obj.attachEvent('on'+type,fn); //IE添加事件绑定
            stopEvent();
        }
    }
   function removeEvent(obj,type,fn){ //移除事件
        if(obj.removeEventListener){
            obj.removeEventListener(type,fn,false); //非IE移除事件,移除事件，第三个参数必须是函数名
        }else{
            obj.detachEvent('on'+type,fn); //IE移除事件
        }
    }

(5) For example click event to prevent the spread of events

obj.onclick=function(ev){
            var event=ev||window.event;
            alert('aa');
            if(event.stopPropagation){
                event.stopPropagation(); //非IE阻止事件传播
            }else{
                event.cancelBubble=true; //IE阻止事件传播
            }
     }

(6) the event delegate mouseover and mouseover (often used for the removal of the floating elements of the container when the mouse flashing problems between different subelements. Just function function (ev) {} The following code is added to the head )

// mouseover委托事件
    var event=ev||window.event;
    // var from=event.fromElement||event.relatedTarget;
    //在mouseover事件中from，表示鼠标来自哪个元素，也是事件委托类型，和target与srcElement相反
    // alert(from);
    var from=event.fromElement||event.relatedTarget;
    while(from){
        if (this==from) {
            return false;
        };
        from=from.parentNode;
    }
    //mouseout委托事件
    var event=ev||window.event;
        var to=event.toElement||event.relatedTarget;
        //在mouseout事件中to，表示鼠标指向那个元素，也是事件委托类型，和target与srcElement相反
        // alert(to)
        while(to){
            if (this==to) {
                return false;
            };
            to=to.parentNode;
        }

(7) wheel event

box.onmousewheel=function (ev){
     var event=ev||window.event;
     // box.innerHTML='鼠标滚动'+event.wheelDelta;
     if (event.wheelDelta>0) {
     alert('鼠标前滚');//非火狐 前滚120
     } else{
     alert('鼠标后滚')//非火狐 后滚-120
     };
     }*/
    box.addEventListener('DOMMouseScroll',function (ev){
     var event=ev||window.event;
     alert(event.detail);//火狐前滚：-3 ，后滚：3
     },false)//IE678不支持

8.js load demand asynchronous loading
demo.js follows

function test() {
    console.log('hello');
}

index.html follows

  function loadScript(url,callback){
        var script=document.createElement('script');
        script.type='text/javascript';
        if(script.readyState){ //ie
            script.onreadystatechange=function(){
                if(script.readyState=='complete'||script.readyState=='loaded'){
                    callback()
                }
            }
        }else{
            script.onload=function(){ //Safari chrome firefox opera ----Ie script不具备onload方法
                callback();
            }
        }
        script.src=url;  //写在这里是为了防止onreadystatechange状态不改变
        document.head.appendChild(script)
    }
    loadScript('demo.js',function(){test()})