在 JavaScript 中觸發點選事件

Shraddha Paghdar 2023年1月30日 2022年5月10日 JavaScript JavaScript Event
  1. 在 JavaScript 中使用 click() 觸發點選事件
  2. 在 JavaScript 中使用 addEventListener() 觸發點選事件
在 JavaScript 中觸發點選事件

視窗物件是用於與瀏覽器通訊的最重要的物件之一。它代表瀏覽器的視窗。所有全域性變數和函式都成為視窗物件的成員。Window-Location 物件用於獲取當前頁面的 URL,也用於更改重定向的 URL。

今天的文章展示瞭如何在 JavaScript 中觸發點選事件。

在 JavaScript 中使用 click() 觸發點選事件

這是 JavaScript 提供的內建事件。元素在被按下時接收點選事件,並且當指標在元素內時釋放指點裝置上的鍵(例如,滑鼠左鍵)。

click() 在按順序觸發向下和向上滑鼠事件後觸發。關於 click 函式的更多資訊可以在方法 click() 的文件中找到。

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>
const link = document.getElementById('btn');
for(let i = 0; i < 5; i++) {
   link.click();
}
function openGoogleByMethod() {
    console.log("Event triggered")
}

我們使用上面示例中的元素 ID 提取元素,並將 Click 事件應用於元素。如果你想多次執行自動點選事件,你可以編寫 for 迴圈並在 for 迴圈內呼叫 target.click()。它會自動呼叫按鈕的單擊,直到計數器達到其最大值並輸出 Triggered event 5 次。

輸出:

"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"

在 JavaScript 中使用 addEventListener() 觸發點選事件

這是 JavaScript 事件目標介面提供的一個完整方法。此方法註冊一個事件偵聽器。每當在目標上捕獲指定的事件時,就會呼叫我們配置的函式。

語法

target.addEventListener($type, $listener);
target.addEventListener($type, $listener, $options);
target.addEventListener($type, $listener, $useCapture);
  • $type 是一個強制引數,它只接受一個字串,指示要監視的事件的型別。它是一個區分大小寫的引數。它支援諸如 clickkeyboardinputdatabase 等各種事件。$listener 是一個強制引數。當指定型別的事件發生時,此引數作為物件接收有關它的通知。此物件必須實現 EventListener 介面或 JavaScript 函式。
  • $options 是一個可選引數。此引數指定事件偵聽器的屬性。一些屬性是 captureoncepassivesignal$useCapture 是一個可選引數。此引數接受布林值。這種型別的事件將首先傳送到 DOM 樹底部的 EventTarget 或不傳送將由該布林值決定。如果為 true,則此事件首先傳送到註冊的偵聽器,然後傳送到 EventTarget。

有關 addEventListener 函式的更多資訊,請參見方法 addEventListener() 的文件。

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>
const link = document.getElementById('btn');
link.addEventListener('click', e => {});
for(let i = 0; i < 5; i++) {
    link.dispatchEvent(new Event('click'));
}
function openGoogleByMethod() {
    console.log("Event triggered")
}

在上面的示例中,我們使用元素 ID 提取元素併為元素上的 Click 事件新增一個列表器。如果你想多次執行自動點選事件,你可以鍵入 for 迴圈並在 for 迴圈中輸入 target.DispatchEvent (new Event('click')) 方法。dispatchEvent 是排程事件物件的 EventTarget 方法,後跟事件偵聽器。這將自動傳送按鈕單擊事件,直到計數器達到最大值並列印觸發事件 5 次。

輸出:

"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相關文章 - JavaScript Event

  • 在 Onclick 事件中呼叫多個 JavaScript 函式
  • 在 JavaScript 中的 HTML 影象標籤上新增 Onclick 事件
  • 使用 JavaScript 模擬點選
  • JavaScript 中的事件目標
  • 用 JavaScript 在 iframe 中實現一個 onload 事件
  • 在 JavaScript 中檢測鍵盤輸入事件