資訊專欄INFORMATION COLUMN
摘要：定義在鼠標(biāo)光標(biāo)從元素外部首次移動到元素范圍之內(nèi)時觸發(fā)，這個事件不冒泡。又移入的另一個元素可能位于前一個元素的外部，也可能是該元素的子元素。
前言
?我們都知道js提供了鼠標(biāo)事件，而鼠標(biāo)事件中包含了兩對事件，即mouseover和mouseout以及mouseenter和mouseleave這兩對事件，如果只是單純的讀紅寶書上的文字可能體會不到他們的差別，現(xiàn)在我們就用實(shí)例來證明一下這個兩組事件的差別。定義 mouseenter
?在鼠標(biāo)光標(biāo)從元素外部首次移動到元素范圍之內(nèi)時觸發(fā)，這個事件不冒泡。
mouseleave?在位于元素上方的鼠標(biāo)光標(biāo)移動到元素范圍之外時觸發(fā)，這個事件不冒泡。
mouseover?在鼠標(biāo)指針位于一個元素外部，然后用戶將其首次移入另一個元素邊界之內(nèi)時觸發(fā)。
mouseout?在鼠標(biāo)指針位于一個元素上方，然后用戶將其移入另一個元素時觸發(fā)。又移入的另一個元素可能位于前一個元素的外部，也可能是該元素的子元素。
實(shí)例?先放上整段代碼，可以參考一下：
父元素
子元素
?操作的動圖是這樣的：（括號中數(shù)字是表示觸發(fā)的次數(shù)）
第一步：鼠標(biāo)進(jìn)入父元素，同時觸發(fā)mouseenter（1）和mouseover（1）
第二步：鼠標(biāo)進(jìn)入子元素，同時觸發(fā)mouseover（2）和mouseout（1）
第三步：鼠標(biāo)離開子元素，同時觸發(fā)mouseout（2）和mouseover（3）
第四步：鼠標(biāo)離開父元素，同時觸發(fā)mouseout（3）和mouseleave（1）
總結(jié)?根據(jù)上面的操作，我們可以總結(jié)出以下結(jié)論：
mouseenter和mouseleave只有離開該元素時才會觸發(fā)，如果有子元素的話，鼠標(biāo)移入子元素，還算是在該元素中，所以不會觸發(fā)；
mouseover和mouseout是只要有進(jìn)入和離開就會出觸發(fā)，無論是從父元素到子元素還是子元素到父元素，或者是只對父元素進(jìn)行操作（換句話說，會觸發(fā)mouseenter和mouseleave的時候一定會觸發(fā)mouseover和mouseout）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/100524.html
摘要：而當(dāng)鼠標(biāo)本身在元素邊界內(nèi)時，要觸發(fā)該事件，必須先將鼠標(biāo)移出元素邊界外，再次移入才能觸發(fā)。造成以上現(xiàn)象本質(zhì)上是事件不支持冒泡所致。事件屬性返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。我們通過排查和，最后只留下，也就是與事件一起觸發(fā)的時機(jī)。 前言 原文地址 項目地址 不知道大家在面試或者工作過程中有沒有被mouseover和mouseenter(對應(yīng)的是mouseout和mouseleave)事件所困...
摘要：而當(dāng)鼠標(biāo)本身在元素邊界內(nèi)時，要觸發(fā)該事件，必須先將鼠標(biāo)移出元素邊界外，再次移入才能觸發(fā)。造成以上現(xiàn)象本質(zhì)上是事件不支持冒泡所致。事件屬性返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。我們通過排查和，最后只留下，也就是與事件一起觸發(fā)的時機(jī)。 前言 原文地址 項目地址 不知道大家在面試或者工作過程中有沒有被mouseover和mouseenter(對應(yīng)的是mouseout和mouseleave)事件所困...
摘要：可以傳遞三個參數(shù)表示一個或多個事件類型，比如。表示綁定到指定元素的處理函數(shù)。我們稱它為簡寫事件。必須在中，并且使用作為事件觸發(fā)元素，不然無效。和表示鼠標(biāo)移入和移出的時候觸發(fā)。按下返回按下返回和分別表示光標(biāo)激活和丟失，事件觸發(fā)時機(jī)是當(dāng)前元素。 轉(zhuǎn)自個人博客 在JavaScript 有一個非常重要的功能，就是事件驅(qū)動。如果你的網(wǎng)頁需要與用戶進(jìn)行交互的話，就不可能不用到事件。它在頁面完全加...
jQuery 鼠標(biāo)事件 click與dbclick事件 用交互操作中，最簡單直接的操作就是點(diǎn)擊操作。jQuery提供了兩個方法一個是click方法用于監(jiān)聽用戶單擊操作，另一個方法是dbclick方法用于監(jiān)聽用戶雙擊操作。這兩個方法的用法是類似的，下面以click()事件為例 方法一：$ele.click() 綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個事件，用的比較少 點(diǎn)擊觸發(fā) $(ele...
閱讀 3912·2021-11-24 09:39
閱讀 1878·2021-11-02 14:41
閱讀 882·2019-08-30 15:53
閱讀 3542·2019-08-29 12:43
閱讀 1268·2019-08-29 12:31
閱讀 3146·2019-08-26 13:50
閱讀 864·2019-08-26 13:45
閱讀 1068·2019-08-26 10:56
