背景

前端編寫測試用例時，在測試界面上的一些效果時，通常都希望能夠模擬一些用戶操作，而模擬用戶操作最主要的方式就是用代碼觸發(fā)指定事件。通常一些元素上會自帶一些觸發(fā)事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseup、mouseenter，這些事件怎么模擬呢？

思路

其實思路很簡單，web標準中定義了一系列API接口，其中dispatchEvent允許我們向一個指定的事件目標派發(fā)一個事件，而且使用這個方法觸發(fā)的事件是可以正常觸發(fā)我們的標準事件處理規(guī)則的(包括事件捕獲和可選的冒泡過程)，那么這就非常強大了，我們可以基于此做很多事情了。

實現(xiàn)方法

大致流程相信大家都已經(jīng)想到了，無外乎以下幾步操作：

• 創(chuàng)建要觸發(fā)的事件實例
• 獲取要觸發(fā)事件的元素對象
• 調(diào)用元素對象的dispatchEvent方法，參數(shù)是目標事件實例
• 特殊事件要分析一下模擬方式，巧妙的實現(xiàn)

首先，創(chuàng)建事件實例

web標準提供了MouseEvent 接口，專指用戶與指針設(shè)備( 如鼠標 )交互時發(fā)生的事件。使用此接口的常見事件包括：click、dblclick 、mouseup、mousedown。

通過構(gòu)造函數(shù)MouseEvent(typeArg, mouseEventInit),可以生成一個新的MouseEvent對象。該構(gòu)造函數(shù)接受兩個參數(shù)，第一個參數(shù)為typeArg，用于指定事件的名稱，一般都是一個字符串。第二個參數(shù)為mouseEventInit，可以初始化 MouseEvent的字典，也就是指定一些該事件的屬性值，比如鼠標事件常見的screenX、screenY、clientX、clientY等屬性，同時，由于MouseEvent是繼承于UIEvent，UIEvent又繼承于Event，所以mouseEventInit可以包含UIEventInit和EventInit中的屬性。

總結(jié)一行代碼就是：

const mouseEvent = new MouseEvent(typeArg, mouseEventInit);

這里大家看自己實際需要，去指定哪些屬性的哪些值即可。

這里再說一句，不僅是鼠標事件，還有很多其他事件，只要瀏覽器支持，都可以使用的。具體參考：https://developer.mozilla.org/zh-CN/docs/Web/API

這里面列出的事件，理論上都可以自己模擬并觸發(fā)。

其次，就是在指定元素上觸發(fā)該事件

有了事件，那么就可以去調(diào)用對應(yīng)元素上的dispatchEvent方法觸發(fā)了。這里簡單，也就是一行代碼：

document.getElementById("id").dispatchEvent(mouseEvent);

最后，特殊事件或者場景，分解操作來模擬

有些特殊事件或者場景，其實可以分析一波細節(jié)，然后分解成若干個事件連續(xù)觸發(fā)，即可巧妙的實現(xiàn)。
這里舉個例子，點擊事件，其實本質(zhì)是：觸發(fā)一次mousedown，同時在足夠短的時間內(nèi)再觸發(fā)一次mouseup,那么這樣即可間接實現(xiàn)一次click事件。即：

// 一段足夠短的時間內(nèi)
mousedown+mouseup=click

這樣，其實在模擬一些特殊操作時，我們也可以實現(xiàn)了。比如，模擬用戶的鼠標拖拽多選操作，其本質(zhì)就是：現(xiàn)在某個元素上觸發(fā)mousedown事件，然后執(zhí)行mousemove事件，然后拖拽到某一個元素上時，觸發(fā)mouseup事件；即：

// 模擬用戶拖拽鼠標
(開始元素)mousedown+(截止元素)mouseup=一次鼠標拖拽操作

這里細節(jié)可以足夠多，看你實際場景按需模擬即可，比如鼠標移動過程中，鼠標進入某個元素時，該元素還會觸發(fā)mouseenter事件，離開元素還會觸發(fā)mouseleave事件。那就是：

// 更精確的模擬用戶拖拽鼠標
(開始元素)mousedown+(中間元素)mouseenter+(中間元素)mouseleave+(截止元素)mouseup=一次鼠標拖拽操作

總之，細節(jié)可以足夠多，但是夠你模擬出本次操作的基本測試點即可，別忘了，我們的前提是模擬用戶操作，進而執(zhí)行測試用例。

再進一步，你完全可以封裝一些常見的用戶操作，然后將方法暴露出來，在測試用例中引入，實現(xiàn)高度復(fù)用。

總結(jié)

總結(jié)下來呢，其實就是采用MouseEvent和dispatchEvent兩個web標準提供的接口，來通過代碼觸發(fā)事件，進而模擬用戶的操作，達到測試用例中，模擬用戶行為的目的。希望對你有所幫助。

注意事項

這里有些限制條件，需要大家注意下：

1. 本文所說的方法，主要是用于自動化測試場景中的，正常開發(fā)項目中，不建議大家用這種方式觸發(fā)事件，這可能會導(dǎo)致你的代碼難以理解，影響代碼的可維護性。
2. 本文中主要用到的這兩大接口，是有兼容性限制的，IE基本上是無法使用的，但是，一般來講，使用這種方法的場景多數(shù)都是單元測試或者自動化測試的場景，這些場景下一般都會有模擬瀏覽器環(huán)境，而且用的最多的就是chrome的內(nèi)核，所以基本上在測試場景下，這種方式是可以放心使用的。
   

到此這篇關(guān)于詳解用js代碼觸發(fā)dom事件的實現(xiàn)方案的文章就介紹到這了,更多相關(guān)js觸發(fā)dom事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論