在 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
是一個強制引數,它只接受一個字串,指示要監視的事件的型別。它是一個區分大小寫的引數。它支援諸如click
、keyboard
、input
、database
等各種事件。$listener
是一個強制引數。當指定型別的事件發生時,此引數作為物件接收有關它的通知。此物件必須實現 EventListener 介面或 JavaScript 函式。$options
是一個可選引數。此引數指定事件偵聽器的屬性。一些屬性是capture
、once
、passive
和signal
。$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 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