JavaScript >> Javascript 文檔 >  >> JavaScript

使用 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();

觸發內置事件

觸發其他事件,例如 changekeyup ,你需要創建一個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);
});

Tutorial JavaScript 教程
  1. DOM

  2. Javascript ES6+ 中的 var、let 或 const?

  3. 使用 Rust 在瀏覽器之外開始使用 WebAssembly

  4. 全棧項目的 My Express 應用程序文件夾結構和設置

  5. jquery-particles v1.10.4 發布

  6. Redux 的內容和原因

  7. 畫布 API 實現

  1. 初學者的 14 個 CSS 最佳實踐

  2. javascript getElementsByClassName() 總是不返回?

  3. 使用 Vanilla JS 的日曆

  4. 在不到半小時的時間內從 Typeform 創建 Salesforce 潛在客戶

  5. 找出最佳抽象

  6. 如何在 JavaScript 中創建一次性事件處理程序

  7. Mapbox GL JS 入門

  1. 使用 React Hooks 和 GraphQL 構建 Trello 克隆

  2. 地圖中的地圖 JavaScript |代碼

  3. 如何使用 docker 運行 node js 應用程序

  4. 輕鬆本地化:讓您的工作更快的 7 個技巧