如何用js代碼觸發(fā)dom事件-創(chuàng)新互聯

這篇文章主要為大家展示了如何用js代碼觸發(fā)dom事件，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

創(chuàng)新互聯建站是一家專注于成都網站設計、網站建設與策劃設計,湯陰網站建設哪家好?創(chuàng)新互聯建站做網站,專注于網站建設10余年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:湯陰等地區(qū)。湯陰做網站價格咨詢:028-86922220

背景

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

思路

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

實現方法

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

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

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

web標準提供了MouseEvent 接口，專指用戶與指針設備( 如鼠標 )交互時發(fā)生的事件。使用此接口的常見事件包括：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);

分享題目：如何用js代碼觸發(fā)dom事件-創(chuàng)新互聯
本文路徑：http://www.muchs.cn/article36/dhjssg.html

成都網站建設公司_創(chuàng)新互聯，為您提供移動網站建設、建站公司、網站排名、電子商務、關鍵詞優(yōu)化、網站內鏈

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

成都網站建設公司