2016年2月19日个人博客文章--迁移到segmentfault

当我们在编写JS用于处理事件时，由于考虑到不同浏览器间Js代码兼容不同，代码不易记忆,于是做出如下整理。（当然以后还会增加更新的。。。）

示例代码如下:

(1)阻止默认事件

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

小提示：return false; 也能阻止默认事件 但是要注意位置。

（2）获取下（上）一个兄弟节点

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)获取第一个子（最后一个）节点

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）添加（移除）事件监听

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）举例click事件阻止事件传播

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

（6）mouseover与mouseover的事件委托（经常用到，用于去除当 鼠标浮动到元素容器中不同子元素间出现闪动问题。只需在函数function（ev）{} 头部添加以下代码即可）

// 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）滚轮事件

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按需加载 异步加载
demo.js如下

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

index.html如下

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()})

存在不同浏览器间的JS兼容总结