细说浏览器特性检测(2)-通用事件检测

下面我来详细讲解一下“细说浏览器特性检测(2)-通用事件检测”的完整攻略：

一、 概述

在Web开发中，由于不同浏览器对JS事件的支持程度不同，开发者需要通过特性检测来检测浏览器所支持的事件类型，从而针对不同浏览器进行兼容性处理。

常见的事件类型有：鼠标事件、键盘事件、表单事件等。本文将重点讲解如何进行通用事件的检测，以及如何兼容IE浏览器和非IE浏览器。

二、 通用事件的检测

针对不同浏览器的事件支持程度不同，我们需要进行通用事件的检测。下面是一个示例代码：

var isSupported = function(eventName) {
  var el = document.createElement('div');
  eventName = 'on' + eventName;
  var isSupported = (eventName in el);
  if (!isSupported) {
    el.setAttribute(eventName, 'return;');
    isSupported = typeof el[eventName] == 'function';
  }
  el = null;
  return isSupported;
}

该代码通过创建一个div元素，然后检测事件是否在该元素的属性列表中存在。如果存在，则该事件被支持。如果不存在，则通过setAttribute函数动态添加该事件，再通过typeof检测该属性类型是否为function，来判断该事件是否被支持。

三、 兼容IE浏览器和非IE浏览器

针对IE浏览器和非IE浏览器，我们需要对事件的检测方式进行不同的处理。下面是一个以鼠标事件为例的示例代码：

// 非IE浏览器
if (isSupported('click')) {
  el.addEventListener('click', callback, false);
} else {
  el.attachEvent('onclick', callback);
}

// IE浏览器
if (isSupported('mouseenter') && isSupported('mouseleave')) {
  el.addEventListener('mouseenter', callback, false);
  el.addEventListener('mouseleave', callback, false);
} else {
  el.attachEvent('onmouseenter', function() {
    callback.call(el, window.event);
  });
  el.attachEvent('onmouseleave', function() {
    callback.call(el, window.event);
  });
}

在非IE浏览器中，我们可以通过addEventListener函数添加事件。而在IE浏览器中，我们需要通过attachEvent函数添加事件。同时，IE浏览器不支持mouseenter和mouseleave事件，我们需要通过mouseenter的hack方式来兼容。

四、 示例说明

示例1

对于一个简单的点击事件，我们可以使用以下代码来检测并添加事件：

if (isSupported('click')) {
  el.addEventListener('click', function() {
    alert('click!');
  }, false);
} else {
  el.attachEvent('onclick', function() {
    alert('click!');
  });
}

该代码会判断浏览器是否支持click事件，如果支持，则通过addEventListener函数添加click事件；如果不支持，则通过attachEvent函数添加onclick事件。

示例2

对于一个鼠标移入移出事件，我们可以使用以下代码来检测并添加事件：

if (isSupported('mouseenter') && isSupported('mouseleave')) {
  el.addEventListener('mouseenter', function() {
    alert('mouseenter!');
  }, false);
  el.addEventListener('mouseleave', function() {
    alert('mouseleave!');
  }, false);
} else {
  el.attachEvent('onmouseenter', function() {
    alert('mouseenter!');
  });
  el.attachEvent('onmouseleave', function() {
    alert('mouseleave!');
  });
}

该代码会先检测浏览器是否支持mouseenter和mouseleave事件，如果支持，则通过addEventListener函数添加这两个事件；如果不支持，则通过mouseenter的hack方式来兼容，并通过attachEvent函数添加事件。

综上所述，通用事件的检测和兼容性处理是Web开发中的重要环节。通过特性检测，能够更好地适应不同浏览器的差异，实现更好的兼容和用户体验。