Home > Common Problem > body text

There are several ways to add jquery events

尊渡假赌尊渡假赌尊渡假赌
Release: 2023-06-21 14:53:57
Original
2540 people have browsed it

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.

There are several ways to add jquery events

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>
   ```
Copy after login

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;);
   });
   ```
Copy after login

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);
   ```
Copy after login

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(&#39;click&#39;, &#39;#myButton&#39;, function() {
  // 事件处理程序
});
```
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!