Home > front end >  JavaScript jQuery event
JavaScript jQuery event

Time:12-27

//$(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 methods, by using this method,
Can be in the DOM to load in order to be able to read and manipulate immediately call you bind function, and 99.99% of JavaScript functions will need at that moment,

Note: you can on the same page in the infinite time to use the $(document) ready () event,
The registered function will be in accordance with the order (in code) in sequence,
Parameters: fn function to be executed when the DOM ready
In DOM loaded running code, you can write:
JQuery code:
The $(document). Ready (function () {
//write your code here...
});
//shorthand
$(function () {
//write your code here...
})
*/

//1.1 jQuery keyboard events keydown () and keyup () event
/*
An event, such as the mouse has the mousedown, mouseup, according to a person's gestures decomposition of 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,
*/
//$(". Target1 "). The keydown (function (e) {
////the console. The log (e. arget. Value);
//$(" em "). The first (). The text (e. arget, value);
//});

//1.2 jQuery keyboard events keypress events ()
/* keydown event has occurred on the input element binding will find a problem:
Note: access to the content of every time is before 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 digital character of the keyboard (
All in all,

KeyPress is mainly used to receive letters, Numbers, etc. 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, etc.,
*/

//the mouse events in jQuery 1.0
/*
() 1. Click the mouse click event//js onclick
2. The dblclick () the mouse click events//js ondblclick

3. The mousedown () above, when the mouse pointer to the element and press the mouse button, the mousedown event will happen
4. Mouseup () when the mouse button on the element relaxation, mouseup event happens,

5. Mouseenter () when the mouse pointer across the element, mouseenter event happens, the event will use with mouseleave event most of the time,
6. Mouseleave () when the mouse pointer leaves element, mouseleave event happens, most of the time the event will be used with mouseenter events

7. Mouseover () when the mouse pointer over the element, mouseover event happens, most of the time the event will be used with mouseout event
8. A mouseout () when the mouse pointer from the diverse elements, mouseout events, most of the time the event will be used with mouseover events

9. Mousemove () when the mouse pointer moves in the specified elements, mousemove event occurs,
Mousemove event handler will be passed a variable - the event object, its.. ClientX and clientY attributes represent the coordinates of the mouse

Attention!!!!!!
The difference between the mouseover and mouseenter:
Mouseover any child elements if the mouse pointer through the selected element, can trigger a mouseover event,
Mouseenter if the mouse pointer through the selected elements of any child elements will not trigger mouseenter
The difference between the mouseout and mouseleave:
Mouseout whether the mouse pointer to leave selected elements or any child elements, will trigger the mouseout event,
Mouseleave only when the mouse pointer to leave is optional element, can trigger mouseleave event
In short: is moved to the selected element's child elements if the trigger event
Mouseover child element triggering
Mouseenter child elements don't trigger
Mouseout child element triggering
Mouseleave child elements don't trigger
*/

//1.0 click click
//$(" box "). Click (function () {
//alert (" this is a click click event is triggered ")
//});

//2 dblclick the mouse click events
//$(" box "). The dblclick (function () {
//alert (" this is a dblclick the double-click event was triggered the ")
//});

//3 mousedown mouse movement to a certain element is pressed on the trigger events when
//$(" 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 "). The mouseup (function () {
//alert (" this is a mouseup triggered when the mouse button on the element relaxation events ");
//});
  • Related