[Javascript]mouseenter vs mouseover vs hover

這三個東西有夠難搞
MouseOver / MouseOut
MouseEnter / MouseLeave
hover
看起來都一樣呀，都是滑鼠移入移出的動作為什麼要搞這麼多同樣的東西呢？



其實這個問題已經困擾我很久了，但是一直沒有把他搞懂

「反正就可以用就好了呀」這種心態

但是這幾天太頹廢，逼得我不得不拿出點成果

我的Payday2遊玩時間已經20小時了，才拿到沒幾天呀！有機會可以一起玩

[正題]

先來說MouseEnter / MouseLeave 和hover的差別

基本上 兩個沒什麼差
是的就是沒什麼差 (如果我的理解有誤請跟我說)

再來就是他們和MouseOver / MouseOut的差別
MouseOver / MouseOut選取的是 當前的物件
MouseEnter / MouseLeave和hover 選取的是 當前物件以及他的子類別
這就說明三者間的差異

假設有個div1裡面包一個div2；div2外面被div1包住
function{
進入div顯示"IN啦";
離開div顯示"out";
}
用MouseEnter / MouseLeave和hover的情況下當我選取到外層的div1
會顯示出"IN啦"，功能正常
但是當我把游標繼續往內深入觸摸到div2，這時function不會被啟動
直到游標移出div1才會顯示"out"

而在MouseOver / MouseOut功能下
進入div1正常"IN啦"，當我碰觸到div2不同點就發生了
會先顯示"out"表示離開div1，再顯示"IN啦"表示選取到div2
同理
離開div2也是一樣會先"out"div2再"IN啦"div1
以上說明

如果還是看不懂可以直接到我的資料來源看原文板的
資料來源：
實際動手玩玩看
看影片比較直接好懂