How to bind and unbind events in jquery? (detailed code explanation)

In the previous article "18 JavaScript Optimization Tips You Need to Know", we introduced some tips in JavaScript. In this article, let's take a look at how to bind jquery events. I hope it will be helpful to everyone with the relevant knowledge about setting and unbinding.

jQuery event binding and unbinding

1.1. jQuery event registration

jQuery provides us with a convenient event registration mechanism, which makes developers depressed. The advantages and disadvantages of the operation are as follows:

Advantages: The operation is simple, and there is no need to worry about event coverage and other issues.

Disadvantages: Ordinary event registration cannot be used for event delegation, and event unbinding cannot be achieved, so other methods are required.

Syntax

Demo code

1.2. jQuery event handling

Due to the shortcomings of ordinary registration event methods, jQuery has developed multiple processing methods. The key points are as follows:

• on(): used for event binding, currently the most useful event. Binding method

• off(): event unbinding

• trigger() / triggerHandler(): event trigger

1.2.1 Event processing on() binding event

Due to the shortcomings of ordinary registration event methods, jQuery has created multiple new event binding methods bind () / live() / delegate() / on(), etc., the best of which is: on()

Syntax

Demo code

 
 
 
我们都是好孩子
 
我们都是好孩子
 
我们都是好孩子
 
 
  

1.2.3. Event processing off() unbinding event

When the logic above an event, in a specific When it is no longer needed according to requirements, the logic on the event can be removed. This process is called event unbinding. jQuery provides us with a variety of event unbinding methods: die() / undelegate() / off(), etc., and there is even an event binding method one() that only triggers once. Here we focus on off();

Syntax

Demo code

 
 
 
我们都是好孩子
 
我们都是好孩子
 
我们都是好孩子
 
 
我是一个P标签
  

1.2.4. Event processing trigger() automatically triggers events

Sometimes, under certain specific conditions, we hope that certain events can be automatically triggered, such as the automatic playback function of the carousel image being consistent with clicking the button on the right. You can use a timer to automatically trigger the click event on the right button without having to click the mouse. From this jQuery provides us with two automatic trigger events trigger() and triggerHandler();

Syntax

Demo code

1.3. jQuery event object

jQuery encapsulates the event object event in the DOM, with better compatibility, easier acquisition, and little change in usage. When an event is triggered, an event object is generated.

Syntax

Demo code

Note: The event object in jQuery can be used for reference from the event in API and DOM.

1.4. jQuery copy object

jQuery provides us with two sets of APIs to quickly obtain and set the size and position of elements, which are convenient and easy to use. The contents are as follows.

Syntax

Demo code

1.5. jQuery multi-library coexistence

Actual During development, many projects have been developed continuously for more than ten years, and jQuery versions are constantly updated. The initial jQuery version cannot meet the needs. At this time, it is necessary to ensure that new functions are implemented using the new jQuery version while the old version runs normally. This This situation is called the coexistence of multiple jQuery libraries.

Grammar

Demo code

Related video tutorial recommendations:jQuery video tutorial

The above is the detailed content of How to bind and unbind events in jquery? (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!