寫了這么久 js應用 我居然不知道這兩個事件 于是 去google搜索了一番. 才發現這兩個事件 是如此的優秀 且好用... 但搜索過程中 發現 好多人 似乎不太明白這兩個事件 和mouseover mouseout 真正的區別 和用途..  并且看到google中搜索得到的 一些朋友 實現的 跨瀏覽器 解決方案. 覺得似乎有些繁瑣...所以產生了寫一篇blog 把這玩意 說透徹的沖動... 好啦.我們進入正題.

對于 mouseover 和mouseenter 兩個事件 最大的區別就是 mouseenter 是 不冒泡的事件 ..這話怎么理解呢?

<div id=="parent">
<div id="child"></div>
</div>

對于mouseover 時間來說 當鼠標從其他元素 移動到 child節點時發生 但此事件會冒泡 所以會導致 parent 也出發mouseover

如果我們對 parent注冊了 mouseover監聽. 則可能會產生一個什么問題呢？ 從 parent移動到child 同樣出發parent的mouseover  有時候我們不希望這樣的事情發生. 這時候 如果注冊的監聽 是mouseenter的話  無論鼠標從任何元素 移動到child時 只有child元素 發生mouseenter事件 而其祖宗節點 都不會因為冒泡 而觸發此事件...這就 使我們可以徹底放棄  我們以往為了 實現同樣的邏輯  又要對子節點禁止mouseover冒泡 或者又去判斷事件源對象 或判斷srcElement/relatedTarget 那樣麻煩的方案.

對于 mouseout 和mouseleave 也是如此 當鼠標從child 移出時 mouseout同樣會冒泡到 parent 從而觸發parent的 mouseout 二mouseleave 同樣無此問題.

知道了區別 剩下的事情就好辦多了. 遇到此類需求 我們一律mouseenter mouseleave就好..問題是 這玩意只有ie支持 怎么辦呢？

我們只能 用mouseover 和mouseout來模擬  但是如果我們的模擬方案 太過復雜 那是在就意義不大了... 這時候我們就可以 借助 xml 方法compareDocumentPosition 來徹底解決這個問題

我在我的類庫中 封裝了一個方法 專門用來判斷 某個節點的位置 是否在另一個節點的子節點中...

ie可以用 parentNode.contains(childNode) 來判斷 這沒什么好說的 childNode在parentNode DOM樹中存在 那么就是true 

而contains方法 ie專屬 那么 我們就是借助 !!(node.compareDocumentPosition(node2) &16) 來實現同樣的效果.

那么接下來 我們就來談談 compareDocumentPosition 方法 否則 你看到上面的 &16 一定會困惑無比...

compareDocumentPosition 方法在非ie瀏覽器 都被實現到 節點對象的 中了  所以

node.compareDocumentPosition(node2) 的作用就是 比較 node節點與node2節點之間的位置關系..

他的返回值是一個number值...

一般來說 對我們有用的 是以下幾個值

1.  20  (2進制： 010100)

2.  10  (2進制:   001010)