Summary of usage examples of some common event functions in jQuery

1.$(document).ready()

##$(document).ready() is the response in jQuery

JavaScriptA typical way to use the built-in onload event and perform tasks. It has a similar effect to onload. But there are some differences: When a document is completely downloaded into the browser, the window.onload event will be triggered. The
event handler program registered using $(document).ready() will be able to run after the html download is completed and parsed into a Dom tree, but it does not mean that all associated files have been downloaded. . There is generally only one onload event handler in a page, and it can only save a
reference to one function at a time; while $(document).ready() can have multiple. Generally speaking $(document).ready() is better than using onload event handler. However, if the associated file has not been loaded, there will be problems in calling attributes
such as image height and width, so you need to choose the appropriate method at different times.

$(document).ready()有三种写法，分别是： 
> $(document).ready(function() { 
//this is the coding... 
}); 
>$().ready(function() { 
//this is the coding... 
}); 
>$(function() { 
//this is the coding... 
});

2. Event capture and event bubbling

Event capture: A strategy that allows multiple elements to respond to events. During the event capture process, the event is first handed to the outermost element, and then to more specific elements. Event bubbling: Another opposite strategy is called time bubbling. When an event occurs, it will be sent to the most specific element first. After this element gets a chance to respond, the event will bubble up to more general elements. . Event bubbling can sometimes have side effects, leading to unexpected behavior.

3. Three ways to prevent event bubbling
Specify the default operation By calling the .preventDefault() method, the event can be terminated before the default operation is initiated.
Call event.stopPropagation() to stop event propagation
jQuery provides a .stopPropagation() method, which can completely prevent event bubbling. The example code is as follows:
Use the stopPropagation() method to prevent the event from bubbling

$(document).ready(function() { 
$('switcher').click(function(event){ 
if(this.id == 'switcher-narrow'){ 
$('body').addClass('narrow'); 
} 
else if(this.id == 'switcher-large'){ 
$('body').addClass('large'); 
} 
$('switcher .button').romoveClass('selected'); 
$(this).addClass('selected'); 
event.stopPropagation(); 
};) 
});

Use the event.tatget attribute to clarify the event

Object In the event handler The variable event holds the event object. The event.tatget attribute stores the target element where the event occurred. This attribute is specified in the DOM API, but is not implemented by all browsers. jQuery makes the necessary extensions to this event object so that this property can be used in any browser. Through .target, you can determine the element in the DOM that first received the event. Moreover, we know that this refers to the DOM element that handles the event. Use the event.tatget attribute to clarify the event object and prevent the event from bubbling. The code is as follows:

$(document).ready(function() { 
$('switcher').click(function(event){ 
if(event.target == this) 
{ 
$('switcher .button').toggleClass('hidden'); 
} 
};) 
});

4. Commonly used event binding

jQuery uses the .bind() method Bind events to elements and unbind them using the .unbind() method. Moreover, the .bind() method can perform multiple bindings. If there is no binding, it is safe when unbinding. Many times an event only needs to be triggered once, and then it must be unbound immediately. According to the traditional approach, we may first bind the event, and then unbind it after the event is executed. jQuery provides us with a shorthand method.one to specifically solve the tedious code writing in the above scenario. The example is as follows:

$(document).ready(function(){ 
$('#swotcjer').one('click',toggleStyleSwitcher); 
});

5. Compound event

In progress event When capturing, it is often necessary to capture combined user operations and respond with multiple functions. These events are called composite events.
The .read() method provided by jQuery is one of the most commonly used event-compliant methods. In addition, there are two functions used for interactive processing: .hover(over,out) A method that simulates hover events (the mouse moves over and out of an object). This is a custom method that provides a "keep in it" state for frequently used tasks.
.toggle(fn,fn) Toggles the function to be called each time it is clicked.

The above is the detailed content of Summary of usage examples of some common event functions in jQuery. For more information, please follow other related articles on the PHP Chinese website!