jquery事件新增有幾種方式

jquery事件加入的方式有：1、直接在標籤上使用JavaScript，程式碼簡潔易懂無須引入其他函式庫或檔案；2、使用「onclick」「onmouseover」等方法，可以重新組織到一個單獨的JavaScript 檔案中，更易於管理和共享；3、「.bind()」綁定事件，可以綁定多個事件處理程序到單一元素；4、「.on()」綁定事件，支援委託事件處理程序可以減少程式碼複雜度。

本教學作業系統：Windows10系統、jQuery3.6.0版本、Dell G3電腦。

jQuery 提供了許多新增事件處理程序的方式，這裡主要介紹其中的四種方式：

1. 直接在標籤上使用JavaScript

   ```HTML
   <button onclick="alert(&#39;Hello world!&#39;)">Click Me</button>
   ```

優點：

• 程式碼簡潔易懂

• #無須引入其他函式庫或檔案

缺點：

• 不利於維護和重複使用 

• #耦合度高，JavaScript 和HTML 程式碼混雜在一起

2. 使用元素方法`onclick` / `onmouseover` 等等

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   $(&#39;#foo&#39;).click(function() {
     alert(&#39;Hello world!&#39;);
   });
   ```

優點：

• ##與直接在標籤上使用JavaScript 相比，程式碼可以重新組織到一個單獨的JavaScript 檔案中，更容易管理和共用

• 支援鍊式呼叫

缺點：

• 如果有大量的事件和處理程序需要設置，則此方法可能變得冗長且難以維護

  
  

• 物件方法將事件依賴於物件本身的生命週期

#3. 使用`.bind()` 綁定事件

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   var foo = function() {
     alert(&#39;Hello world!&#39;);
   };
   $(&#39;#foo&#39;).bind(&#39;click&#39;, foo);
   ```

優點：

• 可以綁定多個事件處理程序到單一元素

  
  

• `$.bind()`和`$.unbind()` 方法可用來監控事件註冊/登出流程

#缺點：

• 在jQuery 版本3.0 中已經廢棄了`.bind()`, 推薦使用`.on()`

#4. 使用`.on()` 綁定事件

以下是使用jQuery的`.on()`方法進行事件綁定的範例程式碼：

```javascript
$(document).on('click', '#myButton', function() {
  // 事件处理程序
});
```

`.on()` 方法可以接受三個參數。第一個參數是要監聽/綁定的事件類型；第二個參數是可選的選擇器字串或DOM 節點，用於限制回應的元素集合；第三個參數是回調函數，即事件發生時要執行的動作。

優點：

• `.on()` 方法允許你為非常靈活地為文件/元素添加多個事件處理程序。

  
  

• 可以透過 `off()` 方法移除所新增的事件處理程序。

• `.on()` 方法也支援委託事件處理程序，在大量操作元素或動態新增元素時會大幅減少程式碼的複雜度。

缺點：

• 根據附加的事件和元素數量，直接綁定許多事件處理程序可能會導致效能問題。

  
  

• 在jQuery 版本低於1.7 的舊程式碼中無法使用`.on()`, 需要使用其它方法如`.bind()` （需要注意該方法以後也將被廢棄） 和`.delegate()`。

#

以上是jquery事件新增有幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！