JS兼容总结及解决方法

2016年2月19日个人博客文章&＃8211;迁移到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()})