當前位置:首頁 > IT技術

淺析onmouseover與onmouseenter的區別

時間:2019-06-30 00:45:40來源:IT技術作者:seo實驗室小編閱讀:80次「手機版」
 

onmouseover

onmouseover 與 onmouseenter 作為兩個效果相似的鼠標事件,經常被我們使用,但是二者究竟有什么區別,今天我們一起來分析一下。

首先,從英語釋義來看,over表示在某個物體的上方,而enter表示進入。當然,在瀏覽器中,鼠標永遠都在DOM元素的上面,所以,over的時候就已經enter了。

在具體的使用中,兩者的效果是相似的,使用的場景并沒有太大的區別,效果類似css中的hover。但是,兩者還是存在一定的區別的,在大多數相關文章中都會提到一點,那就是mouseenter不支持冒泡,而mouseover支持冒泡。冒泡指的是事件冒泡,即在子元素上觸發的事件會向上傳遞至父級元素,并觸發綁定在父級元素上的相應事件。

那么,如何證明這兩個事件是否支持,事件冒泡呢,js的事件機制給了我們一個很好的解決方法,那就是target(事件源),在事件觸發時,瀏覽器會產生一個event對象,在這個對象上有一個target屬性,指向了觸發事件的最底層的DOM,通過target我們可以準確的找到事件觸發的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmouseover&onmouseenter</title>
    <style> 
        #outer{
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px;
            border: 1px solid #ccc;
        }
        #inner{
            position: absolute;
            left: -50px;
            top: 0;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }       
    </style>
</head>
<body>
    <p id="outer">    
        <p id="inner"></p>
    </p>
    <script>
        outer.onmouseenter = function(e){
            console.log(e.target.id) // outer
        }
        outer.onmouseover = function(e){
            console.log(e.target.id) // inner
        }
    </script>
</body>
</html>

為了讓不讓元素的位置影響結果,我們利用定位屬性將id為inner的p定位在父級元素的外部,當鼠標直接進入到它的內部時,會觸發相應的事件,打印的結果就如代碼所示的那樣了。由此可見,mouseenter是不支持事件冒泡的,在使用的過程中,因為mouseover支持冒泡,所以在父級元素內移動時,可能會多次觸發事件,建議大家謹慎使用mouseover。

第一次寫博客,在排版上可能過于簡單,內容也并不十分完善,希望大家可以多多見諒,未來每周會不定期更新內容,謝謝大家支持~

相關閱讀

break 和continue 區別以及用法。

今天我們來介紹一下循環里的break 和continue的用法以及區別 想搞清楚break 和continue的用法以及區別必須要記住的兩件兩句話!

品牌運營與品牌營銷區別何在?

運營的本質是什么?品牌營銷與品牌運營最大的區別又是什么?運營的本質在《從零開始做運營》里,我說:「一切能夠幫助產品進行推廣、促進

86年版五筆和98年版五筆區別

五筆有兩個版本:86五筆與98規范王碼(簡稱98王碼,有人按86的習慣叫為98五筆)。但98王碼的教程不多,網絡上很不好找。這個版塊貼過的幾篇

不談歷史談當下,QQ與微信的區別是什么

不談歷史,不談定位,不談我身邊、我感覺等業余說法。因為歷史已經是歷史了,并不能夠證明現狀,定位實際上用戶用起來也想不了這么多,極少

Javascript:history.go()和history.back()的用法與區

Javascript:history.go()和history.back()的用法與區別簡單的說就是:go(-1):返回上一頁,原頁面表單中的內容會丟失;back():返回上一頁

分享到:

欄目導航

推薦閱讀

熱門閱讀

三肖必中特l三肖中特期期准免费