jquery Basics (mouse events, form events, keyboard events, custom event articles)

1.jQuery mouse Event Click and Dbclick event method one: $ele. Click () (without parameters) <div id= "Test" > click Trigger <div>
$ ("Ele"). Click (function () {
Alert (' Trigger specified event ')
})
$ ("#test"). Click (function () {
$ ("Ele"). Click ()//Manually specify the trigger event});   method Two: $ele. Click (Handler (EventObject)) (with parameters)  <div id= "Test" > click Trigger <div>
$ ("#test"). Click (function () {//this points to div element}); method Three: $ele. Click ([EventData], Handler (EventObject)) (can take one data parameter)Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transmission under different scopes <div id= "Test" > click Trigger <div>
$ ("#test"). Click (11111,function (E) {
This points to the DIV element
E.date = 11111 Pass Data
});   DblClick ()The usage of the click () is similar to the use of click (). the Dbclick differs from the Click event:-The Click event is actually made up of 2 actions by MouseDown and MouseUp, so the clicked action is triggered only after letting go (Ps:mousedown and MouseUp the next section) The following points are required for DblClick event triggering:DblClick is also superimposed by the 2 click, so the DblClick event can only be triggered if the following conditions are met-the mouse pointer is clicked inside the element. -the mouse pointer is released inside the element. -When the mouse pointer inside the element is clicked again, click the interval time, is the system depends. -When the mouse pointer is inside the element, it is released again. Note: It is not advisable to bind both the click and DblClick events on the same element. The order in which each browser event is triggered is different, and some browsers accept two click events before DblClick, while some browsers accept only one click event. Users can often configure double-click Sensitivity 2.jQuery mouse events via different operating systems and browser MouseDown with MouseUp events so jquery provides a mousedown quick way to listen to users Mouse-pressed action, and there is a way to mouseup a quick way to listen to the user action of Mouse bounce。 two ways to use similar

• Method One: $ele. MouseDown ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered, probably less commonly used <div id= "Test" > click Trigger <div>
$ ("Ele"). MouseDown (function () {
Alert (' Trigger specified event ')
})
$ ("#test"). MouseDown (function () {
$ ("Ele"). MouseDown ()//Manually specify trigger events
});  

• Method Two: $ele. MouseDown (Handler (EventObject))

Binding the $ele element, each time the $ele element triggers a click action executes a callback handler function so that it can do a lot of action on the feedback of the event <div id= "Test" > click Trigger <div>
$ ("#test"). MouseDown (function () {
This points to the DIV element
});

• Method Three: $ele. MouseDown ([EventData], Handler (EventObject))

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transmission under different scopes <div id= "Test" > click Trigger <div>
$ ("#test"). MouseDown (11111,function (e) {
This points to the DIV element
E.date = 11111 Pass Data}); The following points are required for MouseDown event triggering:-MouseDown stress is triggered-if you hold down the mouse in an element and drag the mouse away from this element and release the mouse button, this is still counted as the MouseDown event-any mouse buttons that are pressed can trigger the MouseDown event-with event The which difference of the object button, the value of the left mouse button which is 1, hitting the mouse button which the value is 2, the right mouse button which value is 3 The following points are required for MouseUp event triggering:-MouseUp stress is to let go trigger, and MouseDown is the opposite-MouseUp and MouseDown together is the Click event-if the user presses the mouse button on an element, and drag the mouse away from this element, and then release the mouse button, This is still counted as MouseUp event-any mouse button can trigger MouseUp event-with the event object's which difference button, the value of the left-click which is 1, hitting the mouse button which value is 2, the right mouse click on the value of which is 3 3. The MouseMove event query for jquery mouse events provides a quick and easy way to monitor the MouseMove listen to the actions the user moved method One: $ele. MouseMove () (without reference) method Two: $ele. MouseMove (Handler (EventObject)) (with parameters) method Three: $ele. MouseMove ([EventData], Handler (EventObject)) (with one data parameter)  The following points are required for the MouseMove event trigger:-The MouseMove event is triggered when the mouse pointer moves, even if it is a pixel-if the processor does any significant processing, or if there are multiple handlers for the event, this can cause serious performance problems with the browser 4. MouseOver and mouseout events of jquery mouse events event to listen for a user's move-in move-out Operation, MouseOver () and the Mouseout () event, both of which use similar methods one: $ele. MouseOver () method two: $ele. MouseOver (Handler) method three: $ Ele.mouseover ([EventData], Handler (eventobject)) 5.jQuery mouse events MouseEnter and MouseLeave events manipulate whether the mouse has moved inside the element or outside the element, So jquery provides a quick way to MouseEnter and MouseLeave. you can listen for actions that the user moves to the inside   the difference between MouseEnter events and MouseOverThe key point is: The bubbling way of handling the problem if the P element and the DIV element are bound to the MouseOver event, the mouse leaves the P element, but does not leave the DIV element when the result of the trigger:-P Element Response event-DIV element Response Event The question here is why is the div triggered? The reason is the event bubbling problem, p element triggered mouseover, he will always look up on the parent element of the MouseOver event, if the parent element has MouseOver event will be triggered so in this case, jquery recommended that we use the MouseEnter event The MouseEnter event is called only on the element that binds it, not on the descendant node .6.jQuery Mouse Event Hover event for such a simple logic jquery directly provides a hover method that can be conveniently handled only by passing 2 callback functions in the hover method, which does not need to show the binding 2 events $ (selector). Hover (Handlerin, Handlerout) -Handlerin (eventobject): event function that triggers execution when the mouse pointer enters an element -Handlerout (eventobject): event function that triggers execution when the mouse pointer leaves an element  $ ("P"). Hover (function () {$ (this). CSS ("Background", ' Red ');        }, Function () {$ (this). CSS ("Background", ' #bbffaa '); }    ); Focusin events for 7.jQuery mouse events when an element, or any element within it, gets the focus, for example: INPUT element, when the user clicks on the focus, if the developer needs to capture this action, jquery provides a focusin event with the same parameter and without parameters and data parameters 8.jQuery mouse events of the Focusout event when an element, or any element within it, loses focus., such as input element, when the user clicks out of focus, if the developer needs to capture this action, jquery provides a focusout event 9.jQuery form event blur and the Focus event Div is the parent element of input, When the element that it contains input triggers the focus event, it produces the Focusin () event. Focus () is produced in the element itself, and Focusin () is generated in the element containing the elementBlur and Focusout are also so. 10.jQuery Form Event Change Event <input> element,<textarea> and <select> element values can be changed, Developers can use the Change event to listen for these changed actions INPUT ElementListens for changes in value values and triggers a change event when there are changes. For radio buttons and check boxes, the event fires immediately when the user makes a selection with the mouse. Select ElementFor the drop-down selection box, the event triggers immediately when the user makes a selection with the mouse textarea ElementsMulti-line text input box that triggers a change event when there are changes to the focus

11.jQuery Form Event Select Event A Select event occurs when text in an INPUT element of the textarea or text type is selected. This function invokes all functions that bind to the Select event, including the default behavior of the browser. You can prevent the default behavior of the browser from triggering by returning false in a bound function. Select events can only be used with <input> elements and <textarea> elementsThe same three methods have parameter and no and data parameter 12.jQuery form event Submit Event method One: $ele. Submit ()Binding the $ele element, without any parameters, is typically used to specify that an event is triggered, with less <div id= "Test" > click Trigger <div>
$ ("Ele"). Submit (function () {
Alert (' Trigger specified event ')
})
$ ("#text"). Click (function () {
$ ("Ele"). Submit ()//Specify trigger event}); method Two: $ele. Submit (Handler (EventObject))Binding the $ele element, each time the $ele element triggers a click action executes a callback handler function so that you can do a lot of action on the feedback of the event <form id= "target" action= "destination.html" >
<input type= "Submit" value= "Go"/>
</form>
$ ("#target"). Submit (function () {//Bind submit form Trigger
This points to the FROM element
});

method Three: $ele. Submit ([EventData], Handler (eventobject))Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transmission under different scopes <form id= "target" action= "destination.html" >
<input type= "Submit" value= "Go"/>
</form>
$ ("#target"). 11111,function (data) {//Bind submit form Trigger
data = 1111//Transmitted
});

Specific behavior that triggers the Submit event:-<input type= "Submit" >-<input type= "image" >-<button type= "Submit" >- When some form elements get the focus, you can intercept the submit event by tapping enter (enter).   special attention is needed here:The form element is the behavior of a default submission form, which, if handled by a submit, requires the browser's default behavior to be suppressed.
The traditional way is to call the event object E.preventdefault () to handle, jquery can be directly in the function of the end of the return to False can

jquery is handled as follows: $ ("#target"). Submit (function (data) {
return false; Prevent default behavior, submit form
});

KeyDown () and KeyUp () events for 13.jQuery keyboard events KeyDown Event:When the user is in an element when you press the letter key on the keyboard for the first time, it will be triggered .。 Very simple to use, consistent with basic event parameter processing, where use is not duplicated, list the methods used//Direct bound event
$elem. KeyDown (Handler (EventObject))
Passing parameters
$elem. KeyDown ([EventData], Handler (EventObject))
To trigger a bound event manually
$elem. KeyDown ()

KeyUp Event:When the user On an element for the first time let go of the key on the keyboardTime, it will be triggered. The use method is consistent with the KeyDown, but the trigger condition is the method. Note:-KeyDown is triggered when the keyboard is pressed-KeyUp is on the keyboard and will trigger-in theory it can be bound to any element, but the Keydown/keyup event is just sent to the element with focus, different browsers, can get focus of the element slightly different, But form elements always get focus , this is the most appropriate form element for this event type. -. jquery Keyboard Event KeyPress () event the main differences between KeyPress events and KeyDown and KeyUp-can only capture a single character, cannot capture a key combination-unable to respond to system function keys (such as delete,backspace)-no distinction between keypad and main keyboard numeric characters in summary, KeyPress is primarily used to receive ANSI characters such as letters, numbers, and KeyDown and KeyUP The event procedure can handle any keystroke that is not recognized by the KeyPress. such as: function keys (F1-F12), edit keys, positioning keys, and any combination of these keys and keyboard shift keys. Multi-event binding for 15.on () basic usage:. On (events, [selector], [data]) The most common way to bind a click event to an element is to compare the shortcut to the on method.$ ("#elem"). Click (function () {})//shortcut
$ ("#elem"). On (' click ', Function () {})//on mode

  The biggest difference is that on is a customizable event name, and of course not just how to keep looking downMultiple events are bound to the same function $ ("#elem"). On ("MouseOver mouseout", function () {});

Separated by a space, passing different event names, you can bind multiple events at the same time multiple events bind different functions$ ("#elem"). On ({
Mouseover:function () {},
Mouseout:function () {},
});

Separated by a space, passing different event names, you can bind multiple events at the same time, each event executes its own callback method passing data to a handlerfunction greet (event) {
Alert ("Hello" + event.data.name); Hello Mu class net
}
$ ("button"). On ("click", {
Name: "Mu-Class Network"
}, greet);

The second parameter (object) can be passed to the event handler when an event is triggered . .The advanced usage of On () for its own processing mechanism, there is not only an on method, but also based on the evolution of the live method (after 1.7 is removed), delegate method and so on. The underlying implementation of these methods is also the on method, which is a delegate mechanism that takes advantage of the mechanism of on-the-other-event-mechanism delegation. On (events, [selector], [data], Handler (eventobject))//bind a body Click event//no direct A-element binding point-click event//through the delegation mechanism, click the A element when the event triggers $ (' body '). On (' Click ', ' a ', function (e) {alert (e.target.text Content)}) events are bound to the topmost div element, and when the user fires on the A element, the event will bubble up and will always bubble on the div element. If a second argument is provided, the event will trigger an event callback function when it encounters a selector-matching element in the process of bubbling upwards .17. Unload event Off () method-the event handler bound by the. On ()-Removes the binding through the off () method Binding 2 Events$ ("Elem"). On ("MouseDown MouseUp", FN)

Delete an event$ ("Elem"). Off ("MouseDown")

Delete all Events$ ("Elem"). Off ("MouseDown MouseUp")

shortcut to delete all events, there is no need to pass the event name, all events bound by the node are destroyed$ ("Elem"). Off ()

18.jQuery Event Object UL has n child element Li (only 3 written here), if I want to respond to each Li event, then the general method is to give all Li is a separate event monitoring, so the writing is very logical, but at the same time it seems cumbersome Because Li has a common parent element, and all events are consistent, here we can use a technique to deal with, is often called "event delegation" back to the problem, since the event object is closely related to the current trigger element, so we can from the relevant information inside, from the event object to find The Event.target event.target target property can be an element when registering an event, or its child elements. Typically used to compare event.target and this to determine whether an event was triggered by bubbling. Often used for event bubbling when handling an event delegate simply: Event.target represents the element that is currently triggering the event, and can be judged by a series of attributes of the current element object that is not the element we want //multi-event binding one $ ("ul"). On (' click ', Function (e) { alert (' Trigger element is content: ' + e.target.textcontent ')         })Effects-click: Trigger One-click: Trigger Two-click: Trigger Three-click: Trigger the properties and methods of the 19.jQuery event object

• Event.type: Gets the type of event

Event type of the triggering element

• Event.pagex and Event.pagey: Gets the current coordinates of the mouse relative to the page

With these 2 properties, you can determine the coordinate value of the element in the current page, the position of the mouse relative to the left edge of the document (the left) and the (top) distance, simply from the upper-left corner of the page, which is the page as a reference point, not as the slider moves with the change

• Event.preventdefault () Method: block default behavior

This is very much used, after executing this method, if you click on a link (a tag), the browser will not jump to the new URL. We can use event.isdefaultprevented () to determine if the method (on that event object) has been called.

• Event.stoppropagation () Method: Block Event bubbling

Events can be bubbling to prevent events from bubbling to the DOM tree, that is, event handlers on any predecessor element that does not fire

• Event.which: Gets which key of the mouse is clicked when the mouse is clicked

Event.which standardized Event.keycode and Event.charcode. Event.which also will normalize the button press (MouseDown and Mouseupevents), left-click Report 1, Middle key report 2, right-click Report 3

• Event.currenttarget: The current DOM element in the event bubbling process

The DOM object of the current triggering event before bubbling, equivalent to this.  

• The difference between this and event.target:

JS event is bubbling, so this is changeable, but event.target will not change, it is always directly accept the event of the target DOM element;

• . This and event.target are DOM objects

If you want to use the methods in Jquey, you can convert them to jquery objects. For example, the use of this and $ (this), the use of Event.target and $ (event.target), $ ("a"). Click (Function (event) {
alert (Event.type); "Click" Event
}); 20.jQuery Custom Events The trigger event is known to resemble MouseDown, click, KeyDown, and so on. This type of event is provided by the browser, popularly called the native event, and this type of event is required to have interactive behavior to be triggered. So we can do this: $ (' #elem '). Trigger (' click ');

On the binding on the event element, through the trigger method can be called to alert, very simple! Take a look. What is trigger? Simply put: All handlers and behaviors are executed based on the given event type bound to the matching element trigger in addition to triggering browser events, custom events are supported, and custom time supports passing parameters $ (' #elem '). On (' Aaron ', function (EVENT,ARG1,ARG2) {
Alert ("Auto Touch custom Time")
});
$ (' #elem '). Trigger (' Aaron ', [' Parameter 1 ', ' parameter 2 '])

  trigger Trigger browser events to differ from custom events? -Custom event objects, which are native implementations of the jquery simulation-custom events can pass parameters .The Triggerhandler event trigger event of the jquery custom event also has a feature that bubbles on the DOM tree, so if you want to block bubbling you need to return false in the event handler or invoke the. stoppropagation () in the event object. The trigger method can cause the event to stop bubbling. The event is capable of triggering native and custom, but there is an unavoidable problem: event object is not a perfect implementation, after all, one is the browser, one is self-simulation. Although. Trigger () Simulates the event object, it does not perfectly replicate events that occur naturally, to trigger event handlers that are bound by jQuery, without triggering native events, using. Triggerhandler () instead   The use of Triggerhandler and trigger is the same, focusing on the difference:-Triggerhandler does not trigger the default behavior of the browser,. Triggerhandler ("submit") will not invoke. Submit ()-. Trigger () on the form will affect all elements that match the JQuery object. Triggerhandler () affects only the first matched element-events triggered using. Triggerhandler () and does not bubble up in the DOM tree. If they are not triggered directly by the target element, then it does not do any processing--in contrast to the normal method of returning the JQuery object (so that it can use chained usage). Triggerhandler () returns the return value of the last processed event. If no events are triggered, the undefined is returned

jquery Basics (mouse events, form events, keyboard events, custom event articles)