使用 JavaScript 模擬點選
在 JavaScript 中模擬點選意味著點選事件將在 HTML 元素上自動觸發，而無需使用者手動點選。在建立互動式網頁時，這種模擬點選功能可以在各種情況下派上用場。
為了實現模擬點選功能，我們可以使用 JavaScript 程式語言提供的內建 click() 功能，或者使用 MouseEvent 類建立我們自己的 click 事件。
讓我們看看如何在本文中實現這兩種方式。
在 JavaScript 中使用 click() 模擬點選事件
click() 方法在 JavaScript 中觸發點選事件。此事件在沒有使用者互動的情況下觸發。
click() 可以與支援元素一起使用，例如 input。此方法基於稱為事件冒泡的概念工作。
在事件冒泡中，事件冒泡到文件樹中較高的元素，然後在觸發時觸發它們的單擊事件。
在下面的 HTML 文件中，我們有一個輸入標記、一個核取方塊和一個將 JavaScript 檔案連結到 HTML 文件的指令碼標記。
輸入標籤的 id 為 myCheck 和一個名為 mouseover 的事件，它將函式 myFunction 作為輸入。
<body>
<input type="checkbox" id="myCheck" onmouseover="myFunction()">
<script src="./index.js"></script>
</body>
myFunction 在 JavaScript 檔案中定義。在這個函式中，我們通過 document.getElementById() 函式獲取我們使用它的 id 建立的輸入標籤。
然後我們將 click() 函式新增到該輸入。
function myFunction() {
document.getElementById('myCheck').click();
}
在瀏覽器上執行此程式碼後，這是你將獲得的輸出。
這種方法的缺點是它只適用於某些 HTML 元素。要了解有關 click() 函式的更多資訊，請訪問 MDN 文件。
然而，如果你想模擬點選像錨 <a> 標籤或類似的連結，你必須編寫你的函式來模擬 JavaScript 中的點選。click() 函式將不起作用。
在 JavaScript 中實現一個模擬自定義點選事件的函式
要在 JavaScript 中模擬自定義點選事件，我們必須實現我們的函式。為此，我們將使用 MouseEvent API 來新增 click 事件。
在建立函式之前，讓我們首先建立 HTML 文件。該 HTML 文件將包含一個錨標記和一個指向 JavaScript 檔案的連結。
我們在錨點 <a> 標記上新增了一個 link 的 id，以訪問我們的 JavaScript 檔案中的這個 HTML 元素。我們還將此標籤命名為 Click Me（你可以為此標籤提供任何名稱）。
HTML 文件如下所示。
<body>
<a href="#" id="link">Click Me</a>
<script src="index.js"></script>
</body>
要在 JavaScript 中建立一個新的滑鼠事件，我們必須建立一個 MouseEvent 類的物件。MouseEvent 建構函式採用兩個引數 typeArg 和 mouseEventInit。
event = new MouseEvent(typeArg, mouseEventInit);
typeArg 是它要建立的事件的名稱。在這種情況下，它是一個 click 事件。
mouseEventInit 是一個字典，它本身可以接受各種引數，例如 bubbles、view、clientX、metaKey 等。要了解有關 MouseEvent 建構函式和各種引數的更多資訊，請在 MDN 網站上閱讀其文件。
對於我們的示例，我們只在 mouseEventInit 字典中傳遞了三個鍵值對作為引數。讓我們看看我們傳遞給 mouseEventInit 的三個引數的含義。
-
bubbles：在事件冒泡中，事件將從最裡面的元素開始執行，然後一直到它的祖先（父母）。它需要一個布林值。我們已將其設定為
false，因為我們將在單個元素上註冊此事件；錨標記。該元素也不以巢狀方式存在。 -
cancelable：這告訴瀏覽器我們正在執行的事件是否可以被取消。它也需要一個布林值。 -
view：MouseEvent也接受 view，它是UIEvent的一部分。預設設定為null，但我們也可以將其值設定為window。這將在瀏覽器視窗內執行事件。
var simulateClick = new MouseEvent('click', { bubbles: false, cancelable: true, view: window, }); var url = document.getElementById('link'); url.addEventListener('click', () => console.log('clicked')) url.dispatchEvent(simulateClick)
使用 MouseEvent 類建立的自定義事件將儲存在 simulateClick 變數中。
為了在我們的 JavaScript 檔案中獲取錨標籤，我們將使用 document.getElementById 方法並在 id 中傳遞錨標籤 link。然後我們將該元素儲存在一個名為 url 的變數中。
現在我們已經在 JavaScript 檔案中引用了錨標記，並且我們的自定義點選事件也準備好了，是時候將它新增到錨標記中了。
為了啟動我們建立的模擬點選事件，我們將在 url 變數上使用 dispatchEvent 方法，然後將其中的 simulateClick 作為引數傳遞。
為了確保我們建立的 simulateClick 事件正常工作，我們將使用 addEventListener 在 url 變數上新增另一個 click 事件。然後我們將控制檯記錄一個語句。
這行程式碼是檢查我們建立的事件是否已經被排程。它可以隨時刪除。
應該在執行我們的自定義 simulateClick 事件之前新增此事件。否則，你將不知道 simulateClick 事件是否已成功執行。
上面的程式碼將產生以下輸出：
まとめ
本文演示了兩種在 JavaScript 中模擬點選事件的方法。一種方法是使用名為 click() 的內建函式，另一種方法是建立並執行我們的自定義點選事件 simulateClick。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn