(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享

跨浏览器基础事件

跨浏览器基础事件是指在不同浏览器中实现基础事件的方法。如键盘事件、鼠标事件等。下面是一些实现跨浏览器基础事件的方法：

使用addEventListener方法

addEventListener方法是HTML DOM Event对象的方法，用于将事件与指定元素或对象绑定起来。可以传递三个参数：事件类型、事件发生时需要处理的函数、以及一个布尔值，指定要在事件捕获或事件冒泡阶段执行事件处理程序。

var element = document.querySelector('#myElement');
element.addEventListener('click', function() {
   console.log('element clicked');
}, false);

使用attachEvent方法

attachEvent方法是IE特有的方法，用于将事件与指定元素或对象绑定起来。与addEventListener方法不同的是，attachEvent方法只能捕获冒泡阶段的事件，并且事件名需要加上'on'前缀。

var element = document.querySelector('#myElement');
element.attachEvent('onclick', function() {
   console.log('element clicked');
});

浏览器检测

浏览器检测是指通过代码来检测当前用户所使用的浏览器类型及版本信息。下面是一些常用的浏览器检测方法：

使用navigator.userAgent

navigator.userAgent属性返回浏览器的用户代理字符串，该字符串包含了关于浏览器名称、版本和操作系统名称的信息。通过分析该字符串，可以确定当前用户所使用的浏览器名称和版本。

var isIE = navigator.userAgent.indexOf('MSIE') >= 0;
var isChrome = navigator.userAgent.indexOf('Chrome') >= 0;
var isFirefox = navigator.userAgent.indexOf('Firefox') >= 0;

使用条件注释

条件注释是一种只在特定版本IE中运行代码的特殊语法。通过判断是否支持条件注释，可以确定当前用户所使用的IE版本信息。

var isIE6 = false;
/*@cc_on
     if (@_jscript_version == 5.6) {
         isIE6 = true;
     }
@*/

判断浏览器

根据用户使用的浏览器类型和版本，可以在页面中提供不同的展示效果。下面是判断浏览器类型和版本的一些方法：

使用navigator.userAgent判断

var isIE = navigator.userAgent.indexOf('MSIE') >= 0;
var isChrome = navigator.userAgent.indexOf('Chrome') >= 0;
var isFirefox = navigator.userAgent.indexOf('Firefox') >= 0;

使用条件注释判断

var isIE6 = false;
/*@cc_on
     if (@_jscript_version == 5.6) {
         isIE6 = true;
     }
@*/

判断浏览器版本信息

var version = parseFloat(navigator.appVersion);
if (version < 10) {
   console.log('Your browser is outdated');
}

示例1：

var element = document.querySelector('#myElement');
if (element.addEventListener) {
   element.addEventListener('click', function() {
       console.log('element clicked');
   }, false);
} else if (element.attachEvent) {
   element.attachEvent('onclick', function() {
       console.log('element clicked');
   });
}

示例2：

var isIE = (navigator.userAgent.indexOf('MSIE') >= 0);
if (isIE) {
   console.log('You are using Internet Explorer');
} else {
   console.log('You are using a different browser');
}