EventTarget事件：mouseenter

（只讀）EventTarget事件 - mouseenter

當(dāng)指針設(shè)備（通常是鼠標(biāo)）移動(dòng)到連接了監(jiān)聽(tīng)器的元素上時(shí)，會(huì)觸發(fā)mouseenter事件。

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

輸入時(shí)，會(huì)向?qū)哟谓Y(jié)構(gòu)的每個(gè)元素發(fā)送一個(gè)mouseenter事件。當(dāng)指針到達(dá)文本時(shí)，此處將4個(gè)事件發(fā)送到層次結(jié)構(gòu)的四個(gè)元素。

一個(gè)單獨(dú)的mouseover事件被發(fā)送到DOM樹(shù)的最深層元素，然后它會(huì)向?qū)哟谓Y(jié)構(gòu)冒泡，直到它被處理程序取消或到達(dá)根目錄。

使用深層次結(jié)構(gòu)，發(fā)送的mouseenter事件數(shù)量可能非常巨大，并導(dǎo)致嚴(yán)重的性能問(wèn)題。在這種情況下，最好是監(jiān)聽(tīng)mouseover事件。

結(jié)合其對(duì)稱(chēng)事件mouseleave的行為，mouseenter DOM事件以與CSS :hover偽類(lèi)非常相似的方式運(yùn)行。

基本信息

屬性

示例

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

以下示例說(shuō)明如何使用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ù)轉(zhuǎn)換為機(jī)器可讀的JSON格式。

• 電腦端

• 移動(dòng)端

注釋?zhuān)?/p>

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

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

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

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