jquery--Event chapter (mouse, form, keyboard, event binding and Unbind, event object, custom event)

Original source: https://blog.csdn.net/anfangw/article/details/53557029

Mouse Events Click () and Dbclick () event

<!--method 1-->
<div id= "Test" > Click Trigger <div>
$ ("Ele"). Click (function () {
    alert (' Trigger specified event ')
})
$ ("#test"). Click (function () {
     $ ("Ele"). Click ()  //Manually specify the trigger event 
});
<!--method 2-->
<div id= "Test" > Click Trigger <div>
$ ("#test"). Click (function () {
    //this point to div element
});
<!--method 3-->
<div id= "Test" > Click Trigger <div>
$ ("#test"). Click (11111,function (E) {
    // This points to the DIV element
    //e.date  = 11111 pass Data
});<!--????
-<!--Click event
DblClick is triggered by 2 Click Overlay--

MouseDown and MouseUp events

<!--method 1-->
<div id= "Test" > Click Trigger <div>
$ ("Ele"). MouseDown (function () {
    alert (' Trigger specified event ') )
})
$ ("#test"). MouseDown (function () {
     $ ("Ele"). MouseDown ()  //Manually specify trigger event 
});
<!--method 2-->
<div id= "Test" > Click Trigger <div>
$ ("#test"). MouseDown (function () {
    //this points to div element
});
<!--method 3-->
<div id= "Test" > Click Trigger <div>
$ ("#test"). MouseDown (11111,function (e) {
    // This points to the DIV element
    //e.date  = 11111 pass Data
});

<!--MouseDown hold the mouse, ... Release the mouse
button when any mouse buttons are pressed to trigger MouseDown events
-<!--mouseup emphasis is off
--<!--using the which difference button of the event object , hit the left mouse button which value is 1, hit the mouse button which value is 2, the right mouse button which value is 3-->

MouseMove Events

<!--method 1-->
<div id= "Test" > Click Trigger <div>
$ ("Ele"). MouseMove (function () {
    alert (' Trigger specified event ') )
})
$ ("#test"). Click (function () {
     $ ("Ele"). MouseMove ()  //Specify trigger event 
});
<!--method 2-->
<div id= "test" > Swipe trigger <div>
$ ("#test"). MouseMove (function () {
    //this points to div element 
});
<!--method 3-->
<div id= "Test" > Click Trigger <div>
$ ("#test"). MouseMove (11111,function (e) {
    // This points to the DIV element
    //e.date  = 11111 pass Data
});
<!--The MouseMove event is triggered when the mouse pointer moves
, or if the processor does any significant processing, or if there are multiple handlers for the event, which can cause serious browser performance issues--

mouseover and mouseout\ MouseEnter and MouseLeave eventsThe key to the difference between the MouseEnter event and the mouseover is the bubbling way of handling the problem.

<!--method One--and
<div id= "Test" > Click Trigger <div>
$ ("Ele"). MouseOver (function () {
    alert (' Trigger specified event ') )
})
$ ("#test"). Click (function () {
     $ ("Ele"). MouseOver ()  //Specify trigger event 
});
<!--method Two:-->
<div id= "test" > Swipe trigger <div>
$ ("#test"). MouseOver (function () {
    //this points to div element 
});
<!--method Three--and
<div id= "Test" > Click Trigger <div>
$ ("#test"). MouseOver (11111,function (e) {
    // This points to the DIV element
    //e.date  = 11111 pass Data
});

Hover Events

$ (ele). MouseEnter (function () {
     $ (this). CSS ("Background", ' #bbffaa ');
 })
$ (ele). MouseLeave (function () {
    $ (this). CSS ("Background", ' red ');
})
| |
$ (selector). Hover (Handlerin, handlerout)

Focusin Events

<!--method One--and
<div id= "Test" > Click Trigger <div>
$ ("Ele"). Focusin (function () {
    alert (' Trigger specified event ')
})
$ ("#test"). MouseUp (function () {
     $ ("Ele"). Focusin ()  //Specify trigger event 
});
<!--method Two--
<div id= "Test" > Click Trigger <div>
$ ("#test"). Focusin (function () {
    //this points to div element
});
<!--method Three--and
<div id= "Test" > Click Trigger <div>
$ ("#test"). Focusin (11111,function (e) {
    // This points to the DIV element
    //e.date  = 11111 pass Data
});

focusout Events

<!--method One--and
<div id= "Test" > Click Trigger <div>
$ ("Ele"). Focusout (function () {
    alert (' Triggers the specified event ')
})
$ ("#test"). MouseUp (function () {
     $ ("Ele"). Focusout ()  //Specify trigger event 
});
<!--method Two--
<div id= "Test" > Click Trigger <div>
$ ("#test"). Focusout (function () {
    //this points to div element
});
<!--method Three--and
<div id= "Test" > Click Trigger <div>
$ ("#test"). Focusout (11111,function (e) {
    // This points to the DIV element
    //e.date  = 11111 pass Data
});

Form Events Blur and Focus events

<!--focus () is generated in the element itself, and Focusin () is generated in the elements contained in the element--
<!--Butailiaojiela youdianmeikandong-->

Change EventThe input element listens for changes in value values and, when there is a change, triggers the change event when it loses focus. For radio buttons and check boxes, the event fires immediately when the user makes a selection with the mouse. Select element for drop-down selection box, when the user makes a selection with the mouse, the event immediately triggers the TEXTAREA element multi-line text input box, when there are changes, the change event is triggered after losing focus Select Event

<!--method One--and
$ ("input"). Select ();
<!--method Two--
<input id= "test" value= "text selected" ></input>
$ ("#test"). Select (function () {// Response text Check callback
    //this point to INPUT Element 
});
<!--method Three---
<input id= "test" value= "text selected" ></input>
$ ("#test"). Select (11111,function (E {//Response text Check callback
    //this point to div element 
   //e.date  = 11111 pass Data
});

Submit Event

<!--method One--and
<div id= "Test" > Click Trigger <div>
$ ("Ele"). Submit (function () {
    alert (' Trigger specified event ')
})
$ ("#text"). Click (function () {
     $ ("Ele"). Submit ()  //Specify trigger event 
});
<!--method Two--
<form id= "target" action= "destination.html" >
  <input type= "Submit" value= "Go"/ >
</form>
$ ("#target"). Submit (function () {//Bind submit form trigger
    //this point to from Element 
});
<!--three---
<form id= "target" action= "destination.html" >
  <input type= "Submit" value= "Go"/ >
</form>
$ ("#target"). 11111,function (data) {//Bind submit Form trigger
    //data = 1111// Data
});
<!--form element is the behavior of a default submission form, and if you do so, you need to disable the default behavior of the browser--
<script>
$ ("#target"). Submit (function (data) { 
   return false;//block default behavior, submit form
});
</script>

Keyboard Events KeyDown () and KeyUp () event \keypress () event

Direct binding Event
$elem. KeyDown (Handler (eventobject))
//Pass Parameters
$elem. KeyDown ([EventData], Handler (EventObject) )
//Manually trigger the bound event
$elem. KeyDown ()
<!--The main difference between the KeyPress event and KeyDown and KeyUp
can only capture a single character and cannot capture a key
combination Unable to respond to system function keys (such as Delete,backspace)
numeric characters that do not differentiate between the keypad and the main keyboard 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. -

Event binding and reconciliation On ()

Basic usage:. On (events, [selector], [data])
$ ("#elem"). Click (function () {})  //shortcut
$ ("#elem"). On (' click ', function () {})//on way
//The biggest difference is that on is customizable event name

<!--multiple events bound to the same function--
$ ("#elem"). On ("MouseOver Mouseout ", function () {});
By separating the spaces, 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

<!--pass the data to the handler
-- function greet (event) {
  alert ("Hello" + event.data.name); Hello mu net
}
$ ("button"). On ("click", {
  name: "Mu lesson Net"
}, greet);

advanced usage of On ()

. On (events, [selector], [data], Handler (EventObject))
$ ("div"). On ("click", "P", fn)
//event binding on the topmost div element, 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.

Unload Event Off () method

//through the. On () bound event handler//Remove the binding by the off () method//Bind 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 said to be destroyed $ (" Elem "). Off ()