Détection et polyfill pour émuler mouseenter et mouseleave [JavaScript]

Il semblerait qu’à l’heure où j’écris ces lignes, les événements « mouseenter » et « mouseleave » ne soient pas encore supportés par la dernière version stable de Chrome (alors que FF16 et IE les supportent).
D’autres plus anciennes versions de Firefox peuvent aussi être impactées.
Mais heureusement il existe un polyfill pour ça.

Tout d’abord voici une fonction pour détecter si l’événement est supporté (source) :

// source: http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
function isMouseEventSupported(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;
}

isMouseEventSupported("mouseenter"); // --> true ou false

Maintenant voici le polyfill :

// inspired by : http://blog.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/

// bindEvent is an easy way to create a native binding events
// @param {DOMElement} element The DOM element related to the event
// @param {String} eventName An event name just like 'click'
// @param {Function} fct The function that will be triggered by the event
function bindEvent(element, eventName, fct) {
  if (!element) throw new ErrorType("The element doesn't exist");
  
  if (element.addEventListener) {
    // if it's mouseenter or mouseleave, we want to check the compatibility
    if (eventName === "mouseenter" || eventName === "mouseleave") {
      if (!isMouseEventSupported(eventName)) {
        switch (eventName) {
          case "mouseleave": eventName="mouseout"; break;
          case "mouseenter": eventName="mouseover"; break;
        }
        fct=fixMouseEnter(fct);
      }
    }
    element.addEventListener(eventName, fct, false);
  }
  else
    element.attachEvent("on"+eventName, fct);
}

function fixMouseEnter(fct) {
  return function(evt) {
    var relTarget = evt.relatedTarget;
    if (this === relTarget || isChildOf(this, relTarget)) return;
    fct.call(this, evt);
  }
}
function isChildOf(parent, child) {
  if (parent === child) return false;
  while (child && child !== parent) child = child.parentNode
  return child === parent;
}