詳解用js程式碼觸發dom事件的實現方案
背景
前端編寫測試用例時，在測試介面上的一些效果時，通常都希望能夠模擬一些使用者操作，而模擬使用者操作最主要的方式就是用程式碼觸發指定事件。通常一些元素上會自帶一些觸發事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseup、mouseenter，這些事件怎麼模擬呢？
思路
其實思路很簡單，web標準中定義了一系列API介面，其中dispatchEvent允許我們向一個指定的事件目標派發一個事件，而且使用這個方法觸發的事件是可以正常觸發我們的標準事件處理規則的(包括事件捕獲和可選的冒泡過程)，那麼這就非常強大了，我們可以基於此做很多事情了。
實現方法
大致流程相信大家都已經想到了，無外乎以下幾步操作：
- 建立要觸發的事件例項
- 獲取要觸發事件的元素物件
- 呼叫元素物件的dispatchEvent方法，引數是目標事件例項
- 特殊事件要分析一下模擬方式，巧妙的實現
首先，建立事件例項
web標準提供了MouseEvent 介面，專指使用者與指標裝置( 如滑鼠 )互動時發生的事件。使用此介面的常見事件包括：click、dblclick 、mouseup、mousedown。
通過建構函式MouseEvent(typeArg,mouseEventInit),可以生成一個新的MouseEvent物件。該建構函式接受兩個引數，第一個引數為typeArg，用於指定事件的名稱，一般都是一個字串。第二個引數為mouseEventInit，可以初始化 MouseEvent的字典，也就是指定一些該事件的屬性值，比如滑鼠事件常見的screenX、screenY、clientX、clientY等屬性，同時，由於MouseEvent是繼承於UIEvent，UIEvent又繼承於Event，所以mouseEventInit可以包含UIEventInit和EventInit中的屬性。
總結一行程式碼就是：
const mouseEvent = new MouseEvent(typeArg,mouseEventInit);
這裡大家看自己實際需要，去指定哪些屬性的哪些值即可。
這裡再說一句，不僅是滑鼠事件，還有很多其他事件，只要瀏覽器支援，都可以使用的。具體參考：https://developer.mozilla.org/zh-CN/docs/Web/API
這裡面列出的事件，理論上都可以自己模擬並觸發。
其次，就是在指定元素上觸發該事件
有了事件，那麼就可以去呼叫對應元素上的dispatchEvent方法觸發了。這裡簡單，也就是一行程式碼：
document.getElementById("id").dispatchEvent(mouseEvent);最後，特殊事件或者場景，分解操作來模擬
有些特殊事件或者場景，其實可以分析一波細節，然後分解成若干個事件連續觸發，即可巧妙的實現。
這裡舉個例子，點選事件，其實本質是：觸發一次mousedown，同時在足夠短的時間內再觸發一次mouseup,那麼這樣即可間接實現一次click事件。即：
// 一段足夠短的時間內 mousedown+mouseup=click
這樣，其實在模擬一些特殊操作時，我們也可以實現了。比如，模擬使用者的滑鼠拖拽多選操作，其本質就是：現在某個元素上觸發mousedown事件，然後執行mousemove事件，然後拖拽到某一個元素上時，觸發mouseup事件；即：
// 模擬使用者拖拽滑鼠 (開始元素)mousedown+(截止元素)mouseup=一次滑鼠拖拽操作
這裡細節可以足夠多，看你實際場景按需模擬即可，比如滑鼠移動過程中，滑鼠進入某個元素時，該元素還會觸發mouseenter事件，離開元素還會觸發mouseleave事件。那就是：
// 更精確的模擬使用者拖拽滑鼠 (開始元素)mousedown+(中間元素)mouseenter+(中間元素)mouseleave+(截止元素)mouseup=一次滑鼠拖拽操作
總之，細節可以足夠多，但是夠你模擬出本次操作的基本測試點即可，別忘了，我們的前提是模擬使用者操作，進而執行測試用例。
再進一步，你完全可以封裝一些常見的使用者操作，然後將方法暴露出來，在測試用例中引入，實現高度複用。
總結
總結下來呢，其實就是採用MouseEvent和dispatchEvent兩個web標準提供的介面，來通過程式碼觸發事件，進而模擬使用者的操作，達到測試用例中，模擬使用者行為的目的。希望對你有所幫助。
注意事項
這裡有些限制條件，需要大家注意下：
- 本文所說的方法，主要是用於自動化測試場景中的，正常開發專案中，不建議大家用這種方式觸發事件，這可能會導致你的程式碼難以理解，影響程式碼的可維護性。
- 本文中主要用到的這兩大介面，是有相容性限制的，IE基本上是無法使用的，但是，一般來講，使用這種方法的場景多數都是單元測試或者自動化測試的場景，這些場景下一般都會有模擬瀏覽器環境，而且用的最多的就是chrome的核心，所以基本上在測試場景下，這種方式是可以放心使用的。
到此這篇關於詳解用js程式碼觸發dom事件的實現方案的文章就介紹到這了,更多相關js觸發dom事件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！