使用 JavaScript 觸發內置和自定義事件
有多種方法可以在 JavaScript 中觸發 HTML 元素上的事件。一些元素提供了用於觸發不同類型事件的內置方法。
例如,觸發 click
任何 HTML 元素上的事件,您可以使用 click()
元素DOM對象的方法:
const btn = document.querySelector('button');
btn.click();
同樣,<input>
和 <textarea>
HTML 元素提供 focus()
和 blur()
觸發focus
的方法 和 blur
事件:
const input = document.querySelector('input');
// Focus input element
input.focus();
// Blur input element
input.blur();
<form>
元素提供 submit()
和 reset()
觸發submit()
的方法 和 reset
事件:
const form = document.querySelector('form');
// Trigger submit event
form.submit();
// Trigger reset event
form.reset();
觸發內置事件
觸發其他事件,例如 change
或 keyup
,你需要創建一個Event
對象並將其傳遞給 dispatchEvent()
元素對象的方法如下圖:
const select = document.querySelector('select');
// Listen for change event
select.addEventListener('change', (e) => {
console.log(`A new value is selected.`);
});
// Programmatically trigger `change` event
const event = new Event('change');
select.dispatchEvent(event);
在上面的例子中,我們首先向 change
註冊了一個事件處理程序 <select>
事件 元素,然後使用 Event
創建一個新事件 構造函數,最後使用了dispatchEvent()
觸發change
的方法 事件。
觸發自定義事件
Event
構造函數也可以用來觸發自定義事件,如下所示:
// Listen for `hello` event
select.addEventListener('hello', (e) => {
console.log(`Hey there!`);
});
// Programmatically trigger `hello` event
const event = new Event('hello');
select.dispatchEvent(event);
傳遞自定義數據 - CustomEvent()
要將更多數據傳遞給事件對象,您可以使用 CustomEvent()
而是構造函數。它接受一個可選對像作為可用於定義事件屬性的第二個參數。 detail
可選對象的屬性可用於傳遞自定義數據。
假設您有以下 <time>
元素:
<time data-time="2020-09-29T13:58:25.546Z">Sep 29th, 2020</time>
以下示例演示瞭如何觸發名為 buildTime
的自定義事件 並將附加數據傳遞給事件對象:
// Define an event handler
const handler = (e) => {
console.log(`Build time is ${e.detail}`);
};
// Listen for `buildTime` custom event
document.addEventListener('buildTime', handler);
// Trigger `buildTime` custom event
const time = document.querySelector('time');
const event = new CustomEvent('buildTime', {
detail: time.dataset.time
});
document.dispatchEvent(event);
老式的方式
Event
構造函數適用於除 Internet Explorer 之外的所有現代瀏覽器。要支持 IE9+ 等舊瀏覽器,您可以使用 document.createEvent()
方法創建一個觸發事件如下圖:
const elem = document.querySelector('button');
// Define an event handler
const handler = (e) => {
console.log(`Event is triggered!`);
};
// Listen for `awesome` event
elem.addEventListener('awesome', handler);
// Create an event - IE9+
const event = document.createEvent('Event');
// Define the event name
event.initEvent('awesome', false, true);
// Trigger `awesome` event
elem.dispatchEvent(event);
事件冒泡
有時您可能希望從子元素觸發事件並在父元素上捕獲它。為此,只需設置 bubbles
true
的屬性 .
假設您有以下 HTML 代碼片段:
<form>
<input type="text" name="name">
</form>
以下示例顯示瞭如何在 <input>
上觸發事件 並在 <form>
上捕獲它 元素:
const form = document.querySelector('form');
const input = document.querySelector('input');
// Create a new event with bubbling allowed
const event = new CustomEvent('name', {
bubbles: true,
detail: {
text: () => input.value
}
});
// Listen for `name` event on form
form.addEventListener('name', (e) => {
console.log(`My name is ${e.detail.text()}`);
});
// Trigger `name` event from input when the user types
input.addEventListener('keyup', (e) => {
e.target.dispatchEvent(event);
});