在 jQuery 中處理按鈕點選事件

在今天的文章中，我們將瞭解 jQuery 中的按鈕 click 事件。

在 jQuery 中處理按鈕 click 事件

jQuery 有一個整合的 .click() 方法，它將事件處理程式繫結到 JavaScript click 事件或在元素上排程此事件。

語法：

.click( handler )
.click( [eventData ], handler )

1. handler 是每次觸發事件時執行的函式。
2. eventData 是一個物件，包含要被事件處理程式超越的資料。

此方法是前兩個變體中的 .on("click", handler ) 和第三個變體中 .trigger( "click" ) 的縮寫。當滑鼠指標在元素上方時，click 事件被髮送到元素，並且滑鼠按鈕被按下並啟動。

任何 HTML 元素都可以接收此事件。由於 .click() 方法只是 .on("click", handler ) 的縮寫，它可以用 .off("click") 分隔。

click 事件僅在這一系列事件之後排程：

1. 當滑鼠指標位於元素上方時按下滑鼠按鈕。
2. 當滑鼠指標在元素上方時釋放滑鼠按鈕。

這通常是執行操作之前的所需順序。如果這不是必需的，mousedown 或 mouseup 事件可能更合適。

讓我們通過以下示例來理解它：

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

$("#btn").click(() => {
  console.log("Click event fired")
});

在上面的例子中，我們定義了 button 元素。排程 click 事件，並在單擊按鈕後立即執行該函式。

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

輸出：

Click event fired

在此處檢視演示。