Js操作滑鼠事件的流程

在實際專案裡我們常常都需要用javascript操作滑鼠事件是，那麼今天就來給大家詳細的說一下JS操作滑鼠事件的流程，怎麼使用JS操作滑鼠事件。

注意onmouseover、onmouseout是只執行一次的，二onmousemove是執行多次的

Onmousedown也是只執行一次，每次點擊才執行一次，不會持續觸發，與onkeydown、onkeypress不同，這裡是很亂的，滑鼠事件到底有哪些？ ？ ？

在火狐中顯示是undefined

在ie中顯示是undefined

但是上面的在谷歌中顯示都是正常的，現在需要的做一個兼容，兼容IE與火狐

這裡是有一個疑問的，單獨的console.log(window)，在其中看到的event屬性是undefined，但是consoe.log(window.event)，時顯示的卻是自己想要的效果，為什麼會有這樣的差別呢？

這是老師糾結的地方，但是我不知道到底是為啥這樣

上面的分析是有錯誤的，在谷歌中，e與window.event都是支持的，火狐只支援e,Google只支援window.event

傳參與動態創建屬性

#由於e.pageX和e.pageY這個屬性在IE低版本不支持，（在IE低版本中顯示是）所以利用視覺區滑鼠位置+滾動條捲曲高度來實現獲取基於內容區的滑鼠位置

Document上面的是window

事件捕獲只是了解內容，在IE中不支援

事件處理函數，注意0級事件後面的事件是會覆寫前面的事件，這是很重要的

Window是可以省略的，上面的程式碼沒什麼意義

冒泡：從具體節點到不具體節點

現在代表的是捕獲，但是沒什麼具體的效果，現在和冒泡是一樣的

捕獲：從不具體節點到具體節點

實作與函數執行上下文一樣的效果，addEventListener()在IE瀏覽器中不支援

上面是卸載DOM 0級事件的方法（卸載事件，若界面再次刷新的話，還是會繼續執行該事件處理函數）

其實和卸載DOM0級事件是一樣的效果

#IE添加DOM2級事件

在IE最新版本IE11已經是不支援attachEvent這個屬性

IE卸載DOM2級事件

下面是封裝函數：

#這種寫法在IE中顯示為空

這種寫法在非IE中是會直接報錯

非IE中顯示是一個函數，IE中顯示是undefined,下面的函數封裝就是根據這樣的原理來進行

由於事件捕獲是很少使用到的，所以第四個值通常都是false，不用單獨的傳參，直接寫死

在卸載時，在事件處理函數中不能使用匿名函數

注意在IE版本中的執行順序

DOMContentLoaded現在是了解內容，注意一個概念：事件處理函數 

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼讓DIV自適應高度

#怎麼用CSS隱藏圖片背景的文字內容

前端專案開始製作前初始化CSS必要性

以上是Js操作滑鼠事件的流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！