EventTarget事件：mouseenter

（只讀）EventTarget事件 - mouseenter

當指針設備（通常是鼠標）移動到連接了監(jiān)聽器的元素上時，會觸發(fā)mouseenter事件。

雖然類似mouseover，但它的不同之處在于它不會冒泡，并且當指針從其后代的物理空間之一移動到其自己的物理空間時，它不會被發(fā)送到任何后代。

輸入時，會向?qū)哟谓Y構的每個元素發(fā)送一個mouseenter事件。當指針到達文本時，此處將4個事件發(fā)送到層次結構的四個元素。

一個單獨的mouseover事件被發(fā)送到DOM樹的最深層元素，然后它會向?qū)哟谓Y構冒泡，直到它被處理程序取消或到達根目錄。

使用深層次結構，發(fā)送的mouseenter事件數(shù)量可能非常巨大，并導致嚴重的性能問題。在這種情況下，最好是監(jiān)聽mouseover事件。

結合其對稱事件mouseleave的行為，mouseenter DOM事件以與CSS :hover偽類非常相似的方式運行。

基本信息

屬性

示例

mouseover文檔中有一個示例說明了mouseover和mouseenter之間的區(qū)別。

以下示例說明如何使用mouseover模擬mouseenter事件的事件委派原則。

<ul id="test">
  <li>
    <ul class="enter-sensitive">
      <li>item 1-1</li>
      <li>item 1-2</li>
    </ul>
  </li>
  <li>
    <ul class="enter-sensitive">
      <li>item 2-1</li>
      <li>item 2-2</li>
    </ul>
  </li>
</ul>

<script>
  var delegationSelector = ".enter-sensitive";

  document.getElementById("test").addEventListener("mouseover", function( event ) {
    var target = event.target,
        related = event.relatedTarget,
        match;

    // search for a parent node matching the delegation selector
    while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) {
        target = target.parentNode;
    }

    // exit if no matching node has been found
    if ( !match ) { return; }

    // loop through the parent of the related target to make sure that it's not a child of the target
    while ( related && related != target && related != document ) {
        related = related.parentNode;
    }

    // exit if this is the case
    if ( related == target ) { return; }

    // the "delegated mouseenter" handler can now be executed
    // change the color of the text
    target.style.color = "orange";
    // reset the color after a small amount of time
    setTimeout(function() {
        target.style.color = "";
    }, 500);
    

  }, false);
 

  // function used to check if a DOM element matches a given selector
  // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
  function matches( elem, selector ){
    // the matchesSelector is prefixed in most (if not all) browsers
    return elem.matchesSelector( selector );
  };
</script>

瀏覽器兼容性

我們將兼容性數(shù)據(jù)轉換為機器可讀的JSON格式。

• 電腦端

• 移動端

注釋：

[1]在錯誤236215中實現(xiàn)。

[2]在錯誤432698中實現(xiàn)。

[3]Safari 7在許多不允許的情況下觸發(fā)事件，使整個事件無用。有關錯誤的描述，請參閱錯誤470258（它也存在于舊的Chrome版本中）。Safari 8具有正確的行為。

[4]在錯誤218093中實現(xiàn)。