DIV CSS 佈局教程網

學習的時候，對mouseover-mouseout與mouseenter-mouseleave這兩組事件的區別，看到的解釋是：

前一組穿過子元素會觸發，而後一組不會。

對這句話的意思不是很了解，於是想到寫一個例子看看。

該例子在鼠標經過div時變換子元素p的背景色，通過後換回原來的顏色，如下：

布局代碼：

此外還有一個<strong/>兄弟節點

仔細觀察兩個方法組的效果區別，然而並沒有看出有什麼不同。

到網上一查，得到了啟發。

使用了另一個例子：

目的是查看同樣情況下，方法的調用次數。

代碼如下：

效果：

這才體會到前述的，mouseenter與mouseover的區別。

比較兩個例子，顯然第二個才直觀。

初涉前端，我這才清晰體會到事件的含義，明白它很重要的一個概念：觸發條件。

mouseenter與mouseover的區別，更細致的說，前者只要進入指定觸發元素，在離開前都只觸發一次，相當於子元素與該元素被視為一體的；

後者，從鼠標進入指定元素觸發一次，期間遇到它的子元素再視為觸發條件觸發一次，從子元素離開遇到父元素也會觸發。

其實這次得到最大的經驗是：比較兩個相似事件的不同時，最好能通過例子查看它們被觸發的次數。

一個好的的例子，才是學習的利器。