這篇文章主要為大家展示了如何用js代碼觸發(fā)dom事件，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。
背景
前端編寫(xiě)測(cè)試用例時(shí)，在測(cè)試界面上的一些效果時(shí)，通常都希望能夠模擬一些用戶操作，而模擬用戶操作最主要的方式就是用代碼觸發(fā)指定事件。通常一些元素上會(huì)自帶一些觸發(fā)事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseup、mouseenter，這些事件怎么模擬呢？
思路
其實(shí)思路很簡(jiǎn)單，web標(biāo)準(zhǔn)中定義了一系列API接口，其中dispatchEvent允許我們向一個(gè)指定的事件目標(biāo)派發(fā)一個(gè)事件，而且使用這個(gè)方法觸發(fā)的事件是可以正常觸發(fā)我們的標(biāo)準(zhǔn)事件處理規(guī)則的(包括事件捕獲和可選的冒泡過(guò)程)，那么這就非常強(qiáng)大了，我們可以基于此做很多事情了。
實(shí)現(xiàn)方法
大致流程相信大家都已經(jīng)想到了，無(wú)外乎以下幾步操作：
首先，創(chuàng)建事件實(shí)例
web標(biāo)準(zhǔn)提供了MouseEvent 接口，專(zhuān)指用戶與指針設(shè)備( 如鼠標(biāo) )交互時(shí)發(fā)生的事件。使用此接口的常見(jiàn)事件包括：click、dblclick 、mouseup、mousedown。
通過(guò)構(gòu)造函數(shù)MouseEvent(typeArg, mouseEventInit),可以生成一個(gè)新的MouseEvent對(duì)象。該構(gòu)造函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為typeArg，用于指定事件的名稱，一般都是一個(gè)字符串。第二個(gè)參數(shù)為mouseEventInit，可以初始化 MouseEvent的字典，也就是指定一些該事件的屬性值，比如鼠標(biāo)事件常見(jiàn)的screenX、screenY、clientX、clientY等屬性，同時(shí)，由于MouseEvent是繼承于UIEvent，UIEvent又繼承于Event，所以mouseEventInit可以包含UIEventInit和EventInit中的屬性。
總結(jié)一行代碼就是：
const mouseEvent = new MouseEvent(typeArg, mouseEventInit);
重慶分公司
重慶分公司
