There are several ways to add jquery events

The ways to add jquery events are: 1. Use JavaScript directly on the tag, the code is concise and easy to understand without introducing other libraries or files; 2. Use "onclick" "onmouseover" and other methods to reorganize it into a In a separate JavaScript file, it is easier to manage and share; 3. ".bind()" binding event can bind multiple event handlers to a single element; 4. ".on()" binding event supports delegation Event handlers can reduce code complexity.

Operating system for this tutorial: Windows 10 system, jQuery3.6.0 version, Dell G3 computer.

jQuery provides many ways to add event handlers, here are four of them:

1. Use JavaScript directly on the label

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

Advantages:

• The code is concise and easy to understand

• No need to introduce other libraries or files

Disadvantages:

• Not conducive to maintenance and reuse

• High coupling, JavaScript and HTML codes are mixed together

2. Use element methods `onclick` / `onmouseover` etc.

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

Advantages:

• And directly in Compared to using JavaScript on tags, the code can be reorganized into a separate JavaScript file, making it easier to manage and share

• Supports chained calls

Disadvantages:

• This method can become verbose and difficult to maintain if there are a large number of events and handlers to set up
  

• Object methods depend on the life cycle of the object itself

3. Use `.bind()` to bind events

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

Advantages:

• Can bind multiple event handlers to a single element
  

• `$.bind()` and `$.unbind()` methods can be used to monitor the event registration/unregistration process

Disadvantages:

• Deprecated in jQuery version 3.0 Instead of `.bind()`, it is recommended to use `.on()`

4. Use `.on()` to bind events

The following is a sample code for event binding using jQuery's `.on()` method:

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

The `.on()` method can accept three parameters. The first parameter is the event type to be monitored/bound; the second parameter is an optional selector string or DOM node, used to limit the set of response elements; the third parameter is the callback function, that is, when the event occurs The action to perform.

Advantages:

• #`.on()` method allows you to add multiple event handlers for documents/elements with great flexibility.
  

• The added event handler can be removed through the `off()` method.

• `.on()` method also supports delegated event handlers, which will greatly reduce the complexity of the code when operating a large number of elements or adding elements dynamically.

Disadvantages:

• Depending on the number of events and elements attached, directly binding many event handlers may cause performance issues.
  

• You cannot use `.on()` in old code whose jQuery version is lower than 1.7. You need to use other methods such as `.bind()` (you need to pay attention to this method will also be deprecated in the future) and `.delegate()`.

The above is the detailed content of There are several ways to add jquery events. For more information, please follow other related articles on the PHP Chinese website!