Summary of common events in jquery

1. $ (document). Ready ()
$ (Document). Ready () is a typical method in jquery to respond to the onload event built in JavaScript and execute the task. It has a similar effect with onload. However, there are also some differences:
When a document is completely downloaded to the browser, the window. onload event is triggered. Use $ (document). Ready () for event processing. Program After HTML is downloaded and parsed as the DOM tree, Code It can run, but it does not mean that all associated files have been downloaded.
A page usually has only one onload event handler, and can only store references to one function at a time. $ (document). Ready () can have multiple.
In general, $ (document). Ready () is superior to the onload event handler. However, if the associated file is not loaded yet, the calling of attributes similar to the image height and width will be problematic. Therefore, you need to select an appropriate method for different purposes. Copy code The Code is as follows: $ (document). Ready () can be written in three ways:
> $ (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 policy that allows multiple elements to respond to events. In the process of event capturing, the event is first handed over to the elements at the outermost layer, and then to more specific elements.
event bubbling: Another opposite policy is time bubbling. when an event occurs, it is first sent to the most specific element. After this element gets a response opportunity, events will bubble up to more general elements. Event bubbling sometimes produces side effects, resulting in unexpected behavior.
3. three methods to prevent event bubbles
specify the default action
by calling. the preventdefault () method can terminate an event before you start the default operation.
call event. stoppropagation () to stop event propagation
jquery provides a. stoppropagation () method, which can completely block event bubbling. The instance code is as follows:
use the stoppropagation () method to prevent event bubbling copy Code the code is as follows: $ (document ). ready (function () {
$ ('switcher '). click (function (event) {
If (this. id = 'switcher-narrow') {
$ ('body '). addclass ('narrow');
}< br> else if (this. id = 'switcher-large') {
$ ('body '). addclass ('large');
}< BR >$ ('switcher. button '). romoveclass ('selected');
$ (this ). addclass ('selected');
event. stoppropagation ();
};)
});

Use the event. tatget attribute to specify the event object
The variable event in the event handler stores the event object. The event. tatget attribute stores the target element of an event. This attribute is specified in the dom api but is not implemented by all browsers. Jquery makes necessary extensions to this event object so that this attribute can be used in any browser. Through .tar get, you can determine the elements of the event first received in the Dom. Furthermore, we know that this references the DOM elements used to process events.
The following code uses the event. tatget attribute to identify whether an event object blocks event bubbles:Copy codeThe Code is as follows: $ (document). Ready (function (){
$ ('Switcher '). Click (function (event ){
If(event.tar get = This)
{
$ ('Switcher. click'). toggleclass ('hiddy ');
}
};)
});

4. Bind common events
Jquery binds events to elements by using the. BIND () method, and unbinds elements by using the. Unbind () method. In addition, the. BIND () method can be bound multiple times. If it is not bound, it is safe to unbind it.
In many cases, an event only needs to be triggered once, and then it is necessary to immediately unbind it. According to the traditional practice, we may first bind the event and then unbind it after the event is executed. Jquery provides us with a short method. One to specifically solve the tedious coding in the above scenario, for example:Copy codeThe Code is as follows: $ (document). Ready (function (){
$ ('# Swotcjer'). One ('click', togglestyleswitcher );
});

5. composite events
when capturing events, you often need to capture combined user operations and respond with multiple functions. These events are called composite events.
provided by jquery. the read () method is one of the most common event-compliant methods. In addition, there are two functions used for interactive processing:
. hover (over, out) is a method that imitates a hover event (move the mouse over an object and remove it from it. This is a custom method that provides a "Keep in it" status for frequently used tasks.
. Toggle (FN, FN) switches the function to be called each time you click.