The $(document) ready () method
When the DOM is loaded in place can query and manipulate bind a function to perform,
This is the most important events in the module of a function, because it can greatly improve the response speed of the web application,
In simple terms, this method is purely to the window. The load event registration of alternative, by using this method, can be in the DOM load
Into in order to be able to read and manipulate immediately call you bind function, while 99.99% of the JavaScript function needs to be in that moment,
Note: can be unlimited times on the same page using the $(document) ready () event, one of the registration function will be in accordance with (the code)
Order in sequence,
The mouse events:
1. Click click
$(" box "). Click (function () {
Alert (" this is a click click event is triggered ")});
2. The dblclick the double-click events
$(" box "). The dblclick (function () {
Alert (" this is a dblclick the double-click event was triggered the ")});
3. Mousedown is pressed on the mouse moves to an element when trigger events
$(" box "). The mousedown (function () {
Alert (" this is a mousedown triggered when the mouse is pressed "); });
4. Mouseup when relax the mouse button on element
$(" box "). Mouseup (function () {
Alert (" this is a mouseup triggered when the mouse button on the element relaxation events "); });
5. Mouseenter events
$(" box "). Mouseenter (function () {
The console. The log (" mouseenter "); });
6. Mouseleave event
$(" box "). Mouseleave (function () {
The console. The log (" mouseleave "); });
7. Mouseover events
$(" box "). Mouseover (function () {
The console. The log (" mouseover "); });
8. Mouseout
$(" box "). A mouseout (function () {
The console. The log (" mouseout "); });
Hover events
Hover over,] out)
A mimic hover events (the mouse moves to one object above and remove this object) method, it is a custom method,
It provides frequently used tasks with a state of "hold in", when the mouse moves to a matching element,
Will trigger the specified the first function, when the mouse moves out the elements, will trigger the specified the second function, moreover,
Will be accompanied by a test of whether the mouse is still in a particular element (for example, the image in a div), if it is,
Will continue to "hover" state, without triggering out events (revised using a common mistake of mouseout event),
Parameter description:
Ver: school official cites use the mouse to move to an element to trigger function
Remove elements to trigger out: the mouse function
Form:
1. The focus () event
When the element has focus, trigger focus events, can click with the mouse or keyboard navigation TAB on the trigger, it will trigger the
All the binding focus function,
2. The blur () event
When the element loses focus triggers the blur event, this function will be called to perform binding to the blur event of all functions, including
The browser's default behavior, can be triggered by return false to prevent the browser's default behavior, the blur event will be the element
Trigger loses focus, behavior can be either the mouse, or press the TAB key to leave,
3. Focusin () event
When the element has focus, trigger focusin events,
Focusin with focus events the difference is that he could detect child elements get focus on the parent element,
4. The focusout () event
When the element loses focus trigger focusout events,
Focusout events with the blur the difference is that he could detect child elements in the parent element loses focus,
5. Change () event
Elements, & lt; textarea> And & lt; select> Element's value can be changed, developers can use the
Change event to monitor the changes of action,
The change of the input element: to monitor the value value, when there is a change, change event triggered after loses focus, for radio
Button and check box, when a user use the mouse to make a choice, the incident triggered an immediate,
The select element: the drop-down selection box, when a user using the mouse to make a choice, the incident triggered an immediate,
Textarea element: a multiline text input box, when there is a change, change event triggered after loses focus,
6. The select () event
When the textarea or text in a text type of input element is selected, the select event happens,
This function will be called to perform binding to select all the functions of events, including the browser's default behavior,
Can pass in a binding function return false to prevent triggers the browser's default behavior,
7. Submit () event
Submission form is one of the most common business requirements, such as user registration, some of the information input is need a form submission,
The same sometimes developers need to be at the time of form submission to filter some data, do some necessary operation
(for example: to prove the validity of the form input, if error prevents submitted, from the new input) can submit event at this time,
Listening form is submitted under this action is very simple to use, consistent with the basic event argument processing
Here need to pay special attention to:
Form elements are by default the behavior of the form is submitted, if through the submit process, need to ban the default behavior of the browser
Keyboard events
1. The mouse has the mousedown, mouseup events, such as that's according to a person's gestures to decompose two trigger behavior,
Corresponding to the keyboard also has this kind of event, the user behavior is decomposed into two actions, press the keyboard and let go, for the two movements,
JQuery provides corresponding keydown and keyup method respectively to listen:
Keydown () event: when the keyboard or the button is pressed, the keydown event has occurred,
Keyup () event: when the button is released, keyup event occurs, it happens in the current gains focus element,
2. The keypress events ()
On the input element binding keydown event has occurred there will be a problem:
Every time before access to content is the input, the current input for less than,
Keydown event has occurred to trigger didn't knock into the text box in the text, but if the output text in a text box in the keydown event has occurred,
Get is triggered keyboard events before the text, and keyup event trigger when the keyboard events operation has been completed,
Is trigger for keyboard events after text
When the browser capture keyboard input, also provides a keypress response, this with keydown is very similar to the
The primary difference between keypress events and keydown and keyup
Can capture a single character, can't capture key combination; Can't response system function keys (such as delete, backspace)
Does not distinguish between small keyboard and the keyboard digital characters; So KeyPress is mainly used to receive letters, Numbers and other ANSI characters,
The KeyDown and KeyUP event process can handle any keystroke not KeyPress recognition,
Such as: the function keys (F1 to F12), edit key, TAB, and the combination of any of these keys and keyboard shift key, such as
Events more binding settlement tied on () event binding
Before learning the mouse events, form and keyboard events has a characteristic, is directly binding element to a handler,
All such events are belong to fast processing, open source, in fact you can see, all quick event at the bottom of the handle is through
A "on" ways to implement, jQuery on () method is a recommended a method of binding events,
Basic usage: on (events, [the selector], [data], fn) on the select element binding one or more of the event handler,
The most common element binding to a click event, and compare the shortcut on the different methods of
$(" # elem "). Click (function () {})//shortcut
$(" # elem ") on (' click ', function () {})//way on
The biggest difference is on can be custom event name, multiple event the same function:
$(" # elem ") on (" mouseover mouseout ", function () {});
Through the space separation, pass different event name, can bind multiple events at the same time
Multiple event binding different function
$(" # elem ") on ({
Mouseover: function () {},
Mouseout: function () {},
Click: function () {}
});
Through space separation, pass different event name, can bind multiple events at the same time, each event to perform their own callback methods
Uninstall events off () method
Through. On () binding event handler; Through off () method removes the binding
According to the properties of some on the binding event, off method can also be transmitted by the corresponding combination of event name, namespace,
Selector or processing function to remove the binding on the elements of the specified event handler, when there are multiple filtering parameters,
Only with these parameters exactly match the event handler will be removed
Binding two events: $(" elem ") on (mousedown "mouseup", fn)
To delete an event: $(" elem "). Off (" mousedown ")
Delete all events: $(" elem ") off (" mousedown mouseup ")
Shortcuts to delete all events, there is no need to pass the event name, node binding on all events speak destroyed:
$(" elem ") off () */
Demo uncomment:
$(" # div2 ") off (" mousedown ");
$(" # div3 ") off ();