Javascript多种浏览器兼容写法分析

在开发Web应用时，经常会遇到需要在不同的浏览器上运行的情况，而由于不同浏览器之间实现的差异，可能会导致同样的代码在不同的浏览器上表现不同，甚至出现错误。因此，编写浏览器兼容的Javascript代码非常重要，下面将介绍几种常见的Javascript多种浏览器兼容写法。

判断浏览器类型

在进行浏览器兼容性开发时，我们首要需要做的一件事情就是先识别出用户使用的浏览器的类型和版本信息，根据识别的浏览器类型和版本信息去修复和调整我们的代码。

1. navigator.userAgent

可以通过navigator.userAgent来获取用户的浏览器信息，如下面的示例所示：

// 判断是否为IE浏览器
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
 if (userAgent.indexOf("Edge") > -1) {
    // IE Edge浏览器
 }else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
    // IE 早期版本浏览器
 }

2. document.all

IE浏览器独有的一个属性，用以判断是否为IE浏览器。

if (typeof document.all === 'undefined') {
    // 非IE浏览器
} else {
    // IE浏览器
}

统一事件处理

不同浏览器之间在事件处理方面存在差异，如何统一事件处理是一个很重要的问题。

1. addEventListener & attachEvent

addEventListener是标准方法，attachEvent是IE独有方法，具有相同的功能都是为元素添加事件。需要注意的是，addEventListener是IE9以及以上版本才支持。

// 绑定事件
if (ele.addEventListener){
    ele.addEventListener(eventType, callback, false);
}else if (ele.attachEvent){
    ele.attachEvent('on' + eventType, callback);
}

// 解绑事件
if (ele.removeEventListener){
    ele.removeEventListener(eventType, callback, false);
}else if (ele.detachEvent){
    ele.detachEvent('on' + eventType, callback);
}

2. event.preventDefault & event.returnValue

在事件处理中，阻止默认行为的方法也存在差异，可以使用下面的方法进行兼容性处理。

if (event.preventDefault) {
    event.preventDefault(); // 阻止浏览器默认行为
} else {
    event.returnValue = false; // IE浏览器阻止默认行为
}

总结

以上介绍了两种常见的Javascript多种浏览器兼容写法，当然还有很多其他方法需要掌握。在开发中，我们需要根据具体情况选择相应的兼容性方法进行开发，保证Web应用在各种浏览器上都能够正常运行。