淺談mouseenter和mouseover，mouseout和mouseleave

Wament發表於2019-04-12
原文網址 : https://juejin.im/post/5cb0298e6fb9a06886420e7b

介紹（MDN）

mouseover：當指標裝置移動到存在監聽器的元素或其子元素的時候，mouseover事件就會被觸發。
mouseenter：當定點裝置（通常指滑鼠）移動到元素上時就會觸發 mouseenter 事件

mouseout：事件在當指標裝置（通常是滑鼠）移出了附加偵聽器的元素或關閉了它的一個子元素時觸發。
mouseleave：指點裝置（通常是滑鼠）的指標移出某個元素時，會觸發mouseleave事件。

異同（簡略版）

  觸發條件 是否冒泡
mouseenter 滑鼠指標穿過被選元素 否
mouseover 滑鼠指標穿過被選元素或其子元素、孫元素 是
mouseleave 滑鼠指標穿過被選元素 否
mouseout 滑鼠指標穿過被選元素或其子元素、孫元素 是

執行順序

<div></div>
<script>
    var div = document.getElementsByTagName('div')[0];
    eventBind(div, 'mouseenter', 'mouseenter');
    eventBind(div, 'mouseover', 'mouseover');
    eventBind(div, 'mouseout', 'mouseout');
    eventBind(div, 'mouseleave', 'mouseleave');
    function eventBind(ele, event, output){//簡單封裝個繫結函式
        ele.addEventListener('event',function(){
            console.log(output);
        })
    }//測試展示如下圖
</script>
複製程式碼

淺談mouseenter和mouseover，mouseout和mouseleave

觸發條件

按照介紹中給出的定義
不論滑鼠指標穿過被選元素或其子元素、孫元素，都會觸發mouseover事件
只有滑鼠指標穿過被選元素時，才會觸發mouseenter事件

<div>
    <h2>被繫結的<span class="eventType"></span>事件被觸發<span class="count">0</span></h2>
    </div>
<div>
    <h2>被繫結的<span class="eventType"></span>事件被觸發<span class="count">0</span></h2>
</div>
<script>
    var div = document.getElementsByTagName('div');
    function bindEvent(ele, event, output){
        var eventType = ele.getElementsByClassName('eventType')[0];
        var count = ele.getElementsByClassName('count')[0];
        eventType.textContent = event;
        ele.addEventListener(event,function(){
            count.textContent = parseInt(count.textContent)+1;
        })
    }
    
    bindEvent(div[0], 'mouseover', 'mouseover');
    bindEvent(div[1], 'mouseenter', 'mouseenter');
</script>
複製程式碼
運動軌跡

淺談mouseenter和mouseover，mouseout和mouseleave

觸發說明

淺談mouseenter和mouseover，mouseout和mouseleave

Tips:圖中的每一個獨立箭頭都會觸發以此對應的事件

按照介紹中給出的定義
只有滑鼠指標穿過被選元素時，才會觸發mouseleave事件
不論滑鼠指標穿過被選元素或其子元素、孫元素，都會觸發mouseout事件

//...借用上面程式碼
bindEvent(div[0], 'mouseleave', 'mouseleave');
bindEvent(div[1], 'mouseout', 'mouseout');//測試展示如下圖
複製程式碼
運動軌跡

淺談mouseenter和mouseover，mouseout和mouseleave

觸發說明

淺談mouseenter和mouseover，mouseout和mouseleave
Tips:圖中的每一個獨立箭頭都會觸發以此對應的事件

冒泡

mouseenter事件不冒泡

淺談mouseenter和mouseover，mouseout和mouseleave
mouseleave事件不冒泡

淺談mouseenter和mouseover，mouseout和mouseleave
mouseover事件冒泡

淺談mouseenter和mouseover，mouseout和mouseleave
mouseout事件冒泡

淺談mouseenter和mouseover，mouseout和mouseleave

<div class="outer">
    <div class="inner">
    </div>
</div>
<script>
    var div = document.getElementsByTagName('div');
    function bindEvent(ele, event, output){
        ele.addEventListener(event,function(e){
            console.log(output);
        })
    }
    bindEvent(div[0], 'mouseover', 'outer');
    bindEvent(div[1], 'mouseover', 'inner');
</script>
複製程式碼

題外話

有兩個家庭
第一個家庭的夫婦分別叫over和out,
他們比較關心自己的子孫，子孫有什麼事都會去幫助他們處理，
在家族群他們經常冒泡參與討論；
另外一個家庭的夫婦分別叫enter和leave，
他們就很冷漠，不干涉和參與子孫的活動，
也不在家族群冒泡

若文章有什麼問題還請各位看官指出，謝謝！

相關文章