詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案
背景
前端編寫測(cè)試用例時(shí),在測(cè)試界面上的一些效果時(shí),通常都希望能夠模擬一些用戶操作,而模擬用戶操作最主要的方式就是用代碼觸發(fā)指定事件。通常一些元素上會(huì)自帶一些觸發(fā)事件的方法,例如click、focus等,但是如果是其他的事件,例如mousedown、mouseup、mouseenter,這些事件怎么模擬呢?
思路
其實(shí)思路很簡單,web標(biāo)準(zhǔn)中定義了一系列API接口,其中dispatchEvent允許我們向一個(gè)指定的事件目標(biāo)派發(fā)一個(gè)事件,而且使用這個(gè)方法觸發(fā)的事件是可以正常觸發(fā)我們的標(biāo)準(zhǔn)事件處理規(guī)則的(包括事件捕獲和可選的冒泡過程),那么這就非常強(qiáng)大了,我們可以基于此做很多事情了。
實(shí)現(xiàn)方法
大致流程相信大家都已經(jīng)想到了,無外乎以下幾步操作:
- 創(chuàng)建要觸發(fā)的事件實(shí)例
- 獲取要觸發(fā)事件的元素對(duì)象
- 調(diào)用元素對(duì)象的dispatchEvent方法,參數(shù)是目標(biāo)事件實(shí)例
- 特殊事件要分析一下模擬方式,巧妙的實(shí)現(xiàn)
首先,創(chuàng)建事件實(shí)例
web標(biāo)準(zhǔn)提供了MouseEvent 接口,專指用戶與指針設(shè)備( 如鼠標(biāo) )交互時(shí)發(fā)生的事件。使用此接口的常見事件包括:click、dblclick 、mouseup、mousedown。
通過構(gòu)造函數(shù)MouseEvent(typeArg, mouseEventInit),可以生成一個(gè)新的MouseEvent對(duì)象。該構(gòu)造函數(shù)接受兩個(gè)參數(shù),第一個(gè)參數(shù)為typeArg,用于指定事件的名稱,一般都是一個(gè)字符串。第二個(gè)參數(shù)為mouseEventInit,可以初始化 MouseEvent的字典,也就是指定一些該事件的屬性值,比如鼠標(biāo)事件常見的screenX、screenY、clientX、clientY等屬性,同時(shí),由于MouseEvent是繼承于UIEvent,UIEvent又繼承于Event,所以mouseEventInit可以包含UIEventInit和EventInit中的屬性。
總結(jié)一行代碼就是:
const mouseEvent = new MouseEvent(typeArg, mouseEventInit);
這里大家看自己實(shí)際需要,去指定哪些屬性的哪些值即可。
這里再說一句,不僅是鼠標(biāo)事件,還有很多其他事件,只要瀏覽器支持,都可以使用的。具體參考:https://developer.mozilla.org/zh-CN/docs/Web/API
這里面列出的事件,理論上都可以自己模擬并觸發(fā)。
其次,就是在指定元素上觸發(fā)該事件
有了事件,那么就可以去調(diào)用對(duì)應(yīng)元素上的dispatchEvent方法觸發(fā)了。這里簡單,也就是一行代碼:
document.getElementById("id").dispatchEvent(mouseEvent);
最后,特殊事件或者場(chǎng)景,分解操作來模擬
有些特殊事件或者場(chǎng)景,其實(shí)可以分析一波細(xì)節(jié),然后分解成若干個(gè)事件連續(xù)觸發(fā),即可巧妙的實(shí)現(xiàn)。
這里舉個(gè)例子,點(diǎn)擊事件,其實(shí)本質(zhì)是:觸發(fā)一次mousedown,同時(shí)在足夠短的時(shí)間內(nèi)再觸發(fā)一次mouseup,那么這樣即可間接實(shí)現(xiàn)一次click事件。即:
// 一段足夠短的時(shí)間內(nèi) mousedown+mouseup=click
這樣,其實(shí)在模擬一些特殊操作時(shí),我們也可以實(shí)現(xiàn)了。比如,模擬用戶的鼠標(biāo)拖拽多選操作,其本質(zhì)就是:現(xiàn)在某個(gè)元素上觸發(fā)mousedown事件,然后執(zhí)行mousemove事件,然后拖拽到某一個(gè)元素上時(shí),觸發(fā)mouseup事件;即:
// 模擬用戶拖拽鼠標(biāo) (開始元素)mousedown+(截止元素)mouseup=一次鼠標(biāo)拖拽操作
這里細(xì)節(jié)可以足夠多,看你實(shí)際場(chǎng)景按需模擬即可,比如鼠標(biāo)移動(dòng)過程中,鼠標(biāo)進(jìn)入某個(gè)元素時(shí),該元素還會(huì)觸發(fā)mouseenter事件,離開元素還會(huì)觸發(fā)mouseleave事件。那就是:
// 更精確的模擬用戶拖拽鼠標(biāo) (開始元素)mousedown+(中間元素)mouseenter+(中間元素)mouseleave+(截止元素)mouseup=一次鼠標(biāo)拖拽操作
總之,細(xì)節(jié)可以足夠多,但是夠你模擬出本次操作的基本測(cè)試點(diǎn)即可,別忘了,我們的前提是模擬用戶操作,進(jìn)而執(zhí)行測(cè)試用例。
再進(jìn)一步,你完全可以封裝一些常見的用戶操作,然后將方法暴露出來,在測(cè)試用例中引入,實(shí)現(xiàn)高度復(fù)用。
總結(jié)
總結(jié)下來呢,其實(shí)就是采用MouseEvent和dispatchEvent兩個(gè)web標(biāo)準(zhǔn)提供的接口,來通過代碼觸發(fā)事件,進(jìn)而模擬用戶的操作,達(dá)到測(cè)試用例中,模擬用戶行為的目的。希望對(duì)你有所幫助。
注意事項(xiàng)
這里有些限制條件,需要大家注意下:
- 本文所說的方法,主要是用于自動(dòng)化測(cè)試場(chǎng)景中的,正常開發(fā)項(xiàng)目中,不建議大家用這種方式觸發(fā)事件,這可能會(huì)導(dǎo)致你的代碼難以理解,影響代碼的可維護(hù)性。
- 本文中主要用到的這兩大接口,是有兼容性限制的,IE基本上是無法使用的,但是,一般來講,使用這種方法的場(chǎng)景多數(shù)都是單元測(cè)試或者自動(dòng)化測(cè)試的場(chǎng)景,這些場(chǎng)景下一般都會(huì)有模擬瀏覽器環(huán)境,而且用的最多的就是chrome的內(nèi)核,所以基本上在測(cè)試場(chǎng)景下,這種方式是可以放心使用的。
到此這篇關(guān)于詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案的文章就介紹到這了,更多相關(guān)js觸發(fā)dom事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript中DOM操作常用事件總結(jié)
- JavaScript DOMContentLoaded事件案例詳解
- JavaScript WebAPI、DOM、事件和操作元素實(shí)例詳解
- JS前端知識(shí)點(diǎn)總結(jié)之頁面加載事件,數(shù)組操作,DOM節(jié)點(diǎn)操作,循環(huán)和分支
- JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
- js中DOM事件綁定分析
- JS對(duì)象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流等js開發(fā)基礎(chǔ)小結(jié)
- js學(xué)習(xí)總結(jié)之dom2級(jí)事件基礎(chǔ)知識(shí)詳解
- JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例
- JavaScript DOM操作與事件處理方法
相關(guān)文章
RequireJS入門一之實(shí)現(xiàn)第一個(gè)例子
RequireJS由James Burke創(chuàng)建,他也是AMD規(guī)范的創(chuàng)始人。大家知道我們?yōu)槭裁匆獙W(xué)習(xí)requirejs嗎?帶著這個(gè)疑問來學(xué)習(xí)本篇文章吧,感興趣的朋友一起學(xué)習(xí)RequireJS入門一之實(shí)現(xiàn)第一個(gè)例子吧2015-09-09JavaScript中判斷數(shù)據(jù)類型的方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了一些JavaScript中判斷數(shù)據(jù)類型的方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,需要的小伙伴可以了解一下2023-07-07JS生成隨機(jī)數(shù)的多種方法匯總(不同范圍、類型的隨機(jī)數(shù))
js產(chǎn)生隨機(jī)數(shù)通常是使用javascript的Math.random()函數(shù),下面這篇文章主要給大家介紹了關(guān)于JS生成隨機(jī)數(shù)的多種方法(不同范圍、類型的隨機(jī)數(shù))的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法
這篇文章主要介紹了JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法,實(shí)例分析了javascript中join函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03詳解javascript實(shí)現(xiàn)瀑布流絕對(duì)式布局
這篇文章主要介紹了javascript實(shí)現(xiàn)瀑布流的兩種布局方式,一是絕對(duì)式布局、二是列式布局,詳細(xì)介紹了這兩種布局方式的原理,感興趣的小伙伴們可以參考一下2016-01-01原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
像平時(shí)購物選擇地址時(shí)一樣,通過選擇的省動(dòng)態(tài)加載城市列表,通過選擇的城市動(dòng)態(tài)加載縣區(qū)列表,從而可以實(shí)現(xiàn)省市縣的三級(jí)聯(lián)動(dòng),下面使用原生的JavaScript來實(shí)現(xiàn)這個(gè)功能,需要的朋友參考下吧2016-02-02List the Codec Files on a Computer
List the Codec Files on a Computer...2007-06-06