---
# System prepended metadata

title: 'on(event, handler): 通用事件綁定方法'
tags: [jQuery]

---

### 說明:

- on(event, handler) 是 jQuery 中一個通用的事件綁定方法，它可以用來綁定各種事件，不僅僅是點擊事件。這個方法的**第一個參數是要處理的事件類型，第二個參數是事件處理器（handler）。**

- `on`與 click 事件類似，不過它的特殊性為，綁定在某個元素上時，它可以支持多個以上的事件類型：

     - 使用 click(handler) 時，**你僅能指定點擊事件的處理器**，而 on(event, handler) 允許你在一個地方集中處理多個事件，這樣的設計使得代碼更具擴展性和可讀性。你可以按照需求添加或移除事件，而不必在每次操作時都寫不同的綁定代碼。


### 範例:

- HTML:

```html
<button id="myButton">Click me!</button>
```

- JavaScript & jQuery:
  - 如下所示: 該元素我綁定了兩筆事件類型
    1. 點下按鈕時，產生文字訊息
    2. 滑鼠移動進去時，觸發文字訊息 - [mouseenter event](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseenter_event)
```js
$(document).ready(function () {
  // 選擇按鈕元素，綁定點擊事件處理器
  $("#myButton").on({
    // 每個 on(第一個參數為事件類型 , 第二個參數為事件處理器（handler）)
    click: () => {
        // 點擊觸發事件
      console.log("Button clicked!");
    },
    mouseenter: () => {
        // 滑鼠移動到目標時觸發事件
      console.log("Mouse entered!");
    },
  });
});

```

### 結語:

- 總的來說，click 是 on 的一個簡化形式，用於特定的點擊事件情境。而 on 則為更廣泛的使用情境提供了更多彈性。