为非IE内核游览器添加onmouseenter 和 onmouseleave事件

好像各大类库中jQuery是最后支持这两东东的，关于它们的优势可以参考reglib类库作者的一篇博文《Goodbye mouseover, hello mouseenter》。我们可以在IE观察下它的效果。

注意，我们在红色与蓝色之间移动，并没有触发outer元素的mouseenter事件。无错，它们与mouseover,mouseout最大的区别是它们不会冒泡。

<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head id="head">
    <meta charset="utf-8"/>
    <title>mouseenter and mouseleave by司徒正美</title>
    <style title="text/css">
      div {
        background:red;
      }
      ul {
        background:blue;
      }
    </style>

if (parent != this) {
            handler.call(this, e);
          }
        };
      };
        var $ = function(id){
          return document.getElementById(id);
        };
        window.onload = function(){
          function myFn(e){
            e = e || window.event;
            var target = e.target ? e.target : e.srcElement;
            if(target.nodeType === 3){
              target = target.parentNode;
            }
            $('memo').innerHTML = e.type + ': ' + target.id;
          };
          addEvent($("inner"),"mouseover",myFn,false);
          addEvent($("inner"),"mouseout",myFn,false);
          addEvent($("outer"),"mouseover",myFn,false);
        }
    </script>

</head>
  <body>
    <div id="outer">
      <p>注意：div与ul都绑定了onmouseenter，而只有绑定了onmouseleave</p>
      <ul id = "inner">
        <li>司徒正美</li>
        <li>司徒正美</li>
        <li>司徒正美</li>
        <li>司徒正美</li>
      </ul>
    </div>
    <p id="memo"></p>
  </body>
</html>

下面试图用mouseover与mouseout模拟mouseenter与mouseleave。

function addEvent(el, type, handler, capture) {
  if (typeof el.addEventListener != 'undefined') {
    if (type === 'mouseenter') {
      el.addEventListener('mouseover', withinElement(handler), capture);
    } else if (type === 'mouseleave') {
      el.addEventListener('mouseout', withinElement(handler), capture);
    } else {
      el.addEventListener(type, handler, capture);
    }
  } else if (typeof el.attachEvent != 'undefined') {
    el.attachEvent('on' + type, handler);
  } else {
    el['on' + type] = handler;
  }
}
function withinElement(handler) {
    return function (e) {
      var parent = e.relatedTarget;
      while ( parent && parent != this ) {
        try { parent = parent.parentNode; }
        catch(e) { break; }
      }
      if ( parent != this )
        handler.call(this, e);
    };
  };
var $ = function(id){
  return document.getElementById(id);
}
window.onload = function(){
  function myFn(e){
    e = e || window.event;
    var target = e.target ? e.target : e.srcElement;
    if(target.nodeType === 3){
      target = target.parentNode;
    }
    $('memo').innerHTML = e.type + ': ' + target.id;
  };
  addEvent($("inner"),"mouseenter",myFn,false);
  addEvent($("inner"),"mouseleave",myFn,false);
  addEvent($("outer"),"mouseenter",myFn,false);
}