1.$ (document)-Ready ()
$ (document). Ready () is a typical way in jquery to respond to the onload events built into JavaScript and perform tasks. It has a similar effect to the onload. But there are some differences:
The Window.onload event is triggered when a document is completely downloaded to the browser. Using the $ (document). Ready () registered event handlers will run after the HTML download is complete and resolved to the DOM tree, but it does not mean that all associated files have been downloaded.
There is usually only one onload event handler in a page, and only one reference to a function is saved at a time, and $ (document). Ready () can have multiple.
Generally, $ (document). Ready () is better than using the OnLoad event handler. However, if the associated file has not yet been loaded, the call to a property similar to the height and width of the image can be problematic, so you need to choose the appropriate method at different times.
Copy Code code as follows:
$ (document). Ready () has three kinds of writing, respectively:
> $ (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 given to the outermost element and then to the more specific element.
Event bubbling: Another opposite strategy is called time bubbling, which, when an event occurs, is first sent to the most specific element, and the event bubbles up to a more general element after the element is given an opportunity to respond. Event bubbling can sometimes have side effects, resulting in unexpected behavior.
3. Three ways to block event bubbling
Specify the default action
by calling the. Preventdefault () method, you can terminate an event before starting the default action.
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
Copy Code code 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 explicitly event objects
The event object is stored in the event handler. The Event.tatget property holds the target element in which 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 to be able to use this property in any browser. With. Target, you can determine the element in the DOM that receives the event first. Also, we know that this refers to the DOM element that handles the event.
Use the Event.tatget property to specify that the event object block event bubbling code is as follows:
Copy Code code as follows:
$ (document). Ready (function () {
$ (' switcher '). Click (Function (event) {
if (Event.target = = this)
{
$ (' Switcher. Button '). Toggleclass (' hidden ');
}
};)
});
4. Commonly used event bindings
jquery binds the element by using the. bind () method to unbind the element by using the. Unbind () method. and the. Bind () method is capable of performing multiple bindings, and if there is no binding, it is safe to unbind.
Most of the time a certain event only needs to be triggered once, and then immediately unbind, in the traditional practice, we may be the first event binding, and then after the execution of the event to unbind. jquery provides us with a shorthand approach. One to specifically address the tedious code written in the above scenarios, examples are as follows:
Copy Code code as follows:
$ (document). Ready (function () {
$ (' #swotcjer '). One (' click ', Togglestyleswitcher);
});
5. Compound events
When you do event capture, you often need to capture the combined 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 conforming event methods, in addition to the two functions used for interactive processing:
. Hover (Over,out) a method that mimics a hover event (the mouse moves over an object and removes the object). This is a custom method that provides a "stay in" state for frequently used tasks.
. Toggle (FN,FN) Toggles the function to be invoked each time you click.
