jQuery addEventListener

在今天的文章中，我們將瞭解 jQuery 中的 addEventListener 函式。

jQuery 中的 AddEventListener

JavaScript 提供了 EventTarget 介面的內建 addEventListener() 方法。此方法配置每次將指定事件傳送到目標時呼叫的函式。

jQuery 提供了一個等效的方法，叫做 .on()。與 JavaScript 的 addEventListener 方法類似，.on 方法將一個事件處理函式附加到一個或多個事件的選定元素。

語法：

.on( events [, selector ] [, data ], handler )

1. Events 是表示一種或多種事件型別的字串，由空格和可選名稱空間分隔，例如 Click 或 keydown.myPlugin。
2. selector 表示一個選擇/匹配字串，用於過濾觸發事件的所選元素的後代。如果 selector 未通過或 null，則每次到達所選元素時排程事件。
3. 當引發事件時，資料在 event.data 中傳遞給控制器​​。
4. handler 是在引發事件時執行的函式。如果 handler 函式返回 null，false 值也可以作為快捷方式。

對於當前選定的專案，jQuery 的 .on() 方法將事件處理程式附加到物件。 .on() 方法提供了附加事件處理程式的所有功能。

任何事件名稱都可用於事件引數。jQuery 迭代/迴圈瀏覽器的標準 JavaScript 事件型別，並在瀏覽器由於使用者操作（例如觸發事件的 .click）而失敗時呼叫 handler 函式。

.trigger() 技術還可以使標準瀏覽器事件名稱和自定義事件名稱呼叫連線的處理程式。事件名稱必須包含最好的字母數字字元、下劃線和冒號。

讓我們通過以下簡單示例來理解它。

<button id="btn">Hello World!</button>

$('#btn').on('click', () => {
  console.log("Click event is fired.")
})

在上面的程式碼片段中，我們定義了按鈕。一旦使用者單擊按鈕，就會排程 click 事件，並呼叫 handler 函式。

這類似於 .click() 方法，它在內部觸發 on('click') 方法。

嘗試在任何支援 jQuery 的瀏覽器中執行上面的程式碼片段。顯示以下結果。

"Click event is fired."

演示