Common events for jquery

1.$ (document). Ready ()
$ (document). Ready () is a typical way to respond to JavaScript's built-in onload events and perform tasks in jquery. It has a similar effect as onload. But there are some differences:
The Window.onload event is triggered when a document is completely downloaded to the browser. The event handlers registered with the. Ready () will run after the HTML download is completed and parsed into the DOM tree, but it does not mean that all associated files have been downloaded.
There is typically only one onload event handler in a page, and a reference to a function can only be saved at one time, while $ (document). Ready () can have more than one.
Generally speaking $ (document). Ready () is preferable to using the OnLoad event handler. However, if the associated file has not yet been loaded, a call to a property similar to the height and width of the image will be problematic, so you need to choose the appropriate method at different times.
The code is as follows:

$ (document). Ready () There are three ways to do this, namely:

> $ (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. In the event capture process, the event is first handed to the outermost element and then to the more specific element.
event Bubbling: Another tactic called time bubbling, when an event occurs, is first sent to the most specific element, and after that element gets a response, the event bubbles up to a more general element. Event bubbling can sometimes produce side effects that lead to unexpected behavior.
3. Three ways to block event bubbling
Specify default Actions
You can terminate an event before starting the default operation by calling the. Preventdefault () method.
call Event.stoppropagation () Stop event propagation
jquery provides a. Stoppropagation () method that you can use to completely block event bubbling. The instance code is as follows:
Use the Stoppropagation () method to block event bubbling
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 ();
};)
});

Using the Event.tatget property to clarify event objects
The event object is stored in the event handler for the variable event. The Event.tatget property holds 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. With. Target, you can determine the element in the DOM in which the event was first received. Furthermore, we know that this refers to the DOM element that handles the event.
the code that uses the Event.tatget property to explicitly block events from event objects is as follows:
The code is as follows:

$ (document). Ready (function () {
$ (' switcher '). Click (Function (event) {
if (Event.target = = this) {
$ (' Switcher. Button '). Toggleclass (' hidden ');
}
};)
});

4. Common event Bindings
jquery uses the. bind () method to bind an element to an event by using the. Unbind () method to unbind the element. and the. Bind () method is capable of performing multiple bindings, and if there is no binding, it is safe to unbind.
There are times when an event needs to be triggered only once and then immediately unbound, and as a traditional practice, we may bind the event first and then unbind it after the event has finished executing. jquery provides us with a shorthand method. One to specifically address the tedious code written in the above scenarios, examples are as follows:
The code is as follows:

$ (document). Ready (function () {
$ (' #swotcjer '). One (' click ', Togglestyleswitcher);
});

5. Composite Events
During event capture, it is often necessary to capture a combination of user actions and respond with multiple functions, which we call composite events.
The. Read () method provided by jquery is one of the most commonly used methods of conforming to events, in addition to the two functions that are used when interacting with each other:
. Hover (Over,out) a method that mimics the hover event (moving the mouse over an object and moving out of the object). This is a custom method that provides a "keep in" state for frequently used tasks.
. Toggle (FN,FN) Toggles the function to be called each time it is clicked.

Common events for jquery