實例解析mouseover,mouseout與mouseenter,mouseleave之間的區別

時間 2019-12-05

標籤實例解析 mouseover mouseout mouseenter mouseleave 之間區別简体版

原文原文鏈接

前言

咱們都知道js提供了鼠標事件，而鼠標事件中包含了兩對事件，即mouseover和mouseout以及mouseenter和mouseleave這兩對事件，若是隻是單純的讀紅寶書上的文字可能體會不到他們的差異，如今咱們就用實例來證實一下這個兩組事件的差異。

定義

mouseenter

在鼠標光標從元素外部首次移動到元素範圍以內時觸發，這個事件不冒泡。測試

mouseleave

在位於元素上方的鼠標光標移動到元素範圍以外時觸發，這個事件不冒泡。spa

mouseover

在鼠標指針位於一個元素外部，而後用戶將其首次移入另外一個元素邊界以內時觸發。指針

mouseout

在鼠標指針位於一個元素上方，而後用戶將其移入另外一個元素時觸發。又移入的另外一個元素可能位於前一個元素的外部，也多是該元素的子元素。code

實例

先放上整段代碼，能夠參考一下：seo

<body>
    <div id="parentDiv" style="background-color:aquamarine;width:200px;height:200px;">父元素
        <div id="childDiv" style="background-color:pink;width:100px;height:100px;margin: 0 auto;">子元素</div>
    </div>
   
    <p></p>
    <p></p>
    <p></p>
    <p></p>

    <script>
        //測試鼠標點擊事件
        let parentDiv = document.getElementById('parentDiv')

        let mouseenterCount = 0;
        let mouseleaveCount = 0; 
        let mouseoverCount = 0; 
        let mouseoutCount = 0; 


        parentDiv.addEventListener('mouseenter',function(){
            let showText = document.getElementsByTagName('p')[0];
            mouseenterCount++;
            showText.innerText = "鼠標enter的次數爲" + mouseenterCount;
        })

        
        parentDiv.addEventListener('mouseleave',function(){
            let showText = document.getElementsByTagName('p')[1];
            mouseleaveCount++;
            showText.innerText = "鼠標leave的次數爲" + mouseleaveCount;
        })

        parentDiv.addEventListener('mouseover',function(){
            let showText = document.getElementsByTagName('p')[2];
            mouseoverCount++;
            showText.innerText = "鼠標over的次數爲" + mouseoverCount;
        })

        parentDiv.addEventListener('mouseout',function(){
            let showText = document.getElementsByTagName('p')[3];
            mouseoutCount++;
            showText.innerText = "鼠標out的次數爲" + mouseoutCount;
        })

    </script>
</body>

操做的動圖是這樣的：（括號中數字是表示觸發的次數）
事件

第一步：鼠標進入父元素，同時觸發mouseenter（1）和mouseover（1）
第二步：鼠標進入子元素，同時觸發mouseover（2）和mouseout（1）
第三步：鼠標離開子元素，同時觸發mouseout（2）和mouseover（3）
第四步：鼠標離開父元素，同時觸發mouseout（3）和mouseleave（1）

總結

根據上面的操做，咱們能夠總結出如下結論：圖片

mouseenter和mouseleave只有離開該元素時纔會觸發，若是有子元素的話，鼠標移入子元素，還算是在該元素中，因此不會觸發；
mouseover和mouseout是隻要有進入和離開就會出觸發，不管是從父元素到子元素仍是子元素到父元素，或者是隻對父元素進行操做（換句話說，會觸發mouseenter和mouseleave的時候必定會觸發mouseover和mouseout）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。