Summary of common events in jQuery_jquery

1.$(document).ready()
$(document).ready() is a typical way in jQuery to respond to JavaScript's 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 is triggered. The event handler registered using $(document).ready() will run the code after the html is downloaded 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 with calling attributes such as image height and width, so you need to choose the appropriate method at different times.

Copy code The code is as follows:

$(document).ready() has three ways of writing, They are:
> $(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 action
By calling the .preventDefault() method, the event can be terminated before the default action 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 event bubbling

Copy the code The code is as follows:

$(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( ; 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.
The code to use the event.tatget attribute to clarify the event object to prevent the event from bubbling is as follows:

Copy the code

The code is as follows:

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

};)

});



4. Commonly used event bindings

jQuery uses the .bind() method to bind events to elements, and uses the .unbind() method to unbind elements. 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 bind the event first, 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:

Copy code

The code is as follows:

$(document).ready(function(){ $('#swotcjer').one('click',toggleStyleSwitcher); } );
5. Composite events
When capturing events, 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) switches the function to be called each time it is clicked.