Event
1.ready ()
$ (document). Ready (function () {
Code
});
Shorthand:
$ (function ({
Code
});
The event is executed after the page has been loaded, equivalent to Onloca (), but if there is a Onloca () event, ready () will fail
2.on ()
<div class= "Div1" >
<div class= "Div2" ></div>
</div>
$ ("div"). On ("Click MouseOver", ". Div2", function () {
Alert ("Hello World");
});
The On () event can bind multiple events and can add selectors to filter descendant elements, on the example matching DIV element selection. Div1 descendants of the element. Div2
3.off ()
$ ("div"). Off ()
Delete all events on div element
$ ("div"). Off ("click")
Delete a click event on a DIV element
4.bind ()
As with the On () event, multiple events can be bound, and the only difference I find now is that the on () event has a selector selector more than bind ()
5.one ()
Same as the bin () event, but one () bound event is disposable and is deleted once it is used once
6.trigger ()
$ ("div"). Trigger ("click");
A click event that triggers a DIV element
7.triggerHandler ()
$ ("div"). Trigger ("click");
The Change event function is the same as trigger (), except that Triggerhandler () only triggers the first element of the matched collection, and will not be triggered if the triggered event is the browser default.
8.unbind ()
$ ("div"). Unbind ();
Delete all events bound by the DIV element bind ()
$ ("div"). Unbind ("click");
Delete the div element bind ("click") bound event
The removal capability of the tested Unbind () is as valid as the event bound on the On () event
9.live ()
has been deleted
10.die ()
Do not recommend using
11.delegate ()
<ul class= "Div1" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$ ('. Div1 '). Delegate (' Li ', ' click ', function () {
$ (this). CSS (' Color ', ' blue ');
});
When you click the UL.DIV1 element's child Li, the corresponding Li color changes
This method adds an event to the subclass of the selected element, which can be empty "", but cannot be written, and the empty-time event is itself
12.undelegate ()
$ ('. Div1 '). Undelegate (' click ')
$ ('. Div1 '). Undelegate (' Li ', ' click ')
The same effect, clear the event added by the delegate () method
13.hover ()
<ul class= "Div1" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$ ('. Ul1 '). Hover (function () {
$ (this). CSS (' background ', ' blue ');
},function () {
$ (this). CSS (' background ', ' red ');
});
Hover () is a method that mimics the hover event, the first function () is the move in, the second is the move out, and the two are separated by a comma ","
14.blur ()
<input type= "text" id= "text" autofocus>
$ (function () {
$ (' #text '). blur ();
})
Let the text box lose focus
$ (' #text '). Blur (
function () {
CLG (' Blur ');
}
);
Triggers an event when the text box loses focus
15.change ()
<input type= "text" id= "text" >
$ (function () {
$ (' #text '). Change ();
})
$ (' #text '). Change (
function () {
CLG (' Change ');
}
);
Trigger Change () event
16.click ()
<input type= "text" id= "text" >
$ (function () {
$ (' #text '). Click ();
})
$ (' #text '). Click (
function () {
CLG (' click ');
}
);
Trigger the Click () event
17.dblclick ()
<input type= "text" id= "text" >
$ (function () {
$ (' #text '). DblClick ();
})
$ (' #text '). DblClick (
function () {
CLG (' DblClick ');
}
);
Trigger DblClick () double-click event
18.erroe ()
19.focus ()
<input type= "text" id= "text" >
$ (function () {
$ (' #text '). focus ();
})
$ (' #text '). focus (function () {
CLG (' Focus ');
});
Trigger focus () double-click event
20.focusin ()
<p class= "Ul2" >
Here is P
<input type= "text" id= "text" >
</p>
$ ("P"). Focusin (function () {
$ (this). CSS (' Color ', ' blue ');
});
The Focusin () method is the trigger when the child element gets the focus.
21.focusout ()
<p class= "Ul2" >
Here is P
<input type= "text" id= "text" >
</p>
$ ("P"). Focusout (function () {
$ (this). CSS (' Color ', ' blue ');
});
triggered when a child element of a P element loses focus
22.keydown ()
$ (window). KeyDown (function (e) {
CLG (String.fromCharCode (E.keycode))
})
Trigger this event when the keyboard is pressed
23.keypress ()
$ (window). KeyPress (function (e) {
CLG (String.fromCharCode (E.keycode))
})
This event is the same as the KeyDown () event function, which is triggered when the keyboard is pressed
24.keyup ()
$ (window). KeyUp (function (e) {
CLG (String.fromCharCode (E.keycode))
})
Trigger event when keyboard is sent off
25.mousedown ()
<ul class= "UL1" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$ ('. Ul1 '). MouseDown (function (e) {
$ (this). CSS (' background ', ' blue ');
})
Triggers the event by pressing the mouse on the matched element
26.mouseenter ()
<ul class= "UL1" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$ ('. Ul1 '). MouseEnter (function (e) {
$ (this). CSS (' background ', ' blue ');
})
MouseEnter event occurs when the mouse pointer crosses an element
27.mouseleave ()
<ul class= "UL1" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$ ('. Ul1 '). MouseLeave (function (e) {
$ (this). CSS (' background ', ' red ');
})
MouseLeave event occurs when the mouse pointer leaves an element
28.mousemove ()
<ul class= "UL1" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$ ('. Ul1 '). MouseMove (function (e) {
$ (this). CSS (' background ', ' blue ');
})
The MouseMove event occurs when the mouse pointer moves through the specified element.
29.mouseout ()
<ul class= "UL1" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$ ('. Ul1 '). Mouseout (function (e) {
$ (this). CSS (' background ', ' red ');
})
The Mouseout event occurs when the mouse pointer moves away from the element.
30.mouseover ()
<ul class= "UL1" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$ ('. Ul1 '). MouseOver (function (e) {
$ (this). CSS (' background ', ' red ');
})
The MouseOver event occurs when the mouse pointer is over an element.
31.mouseup ()
<ul class= "UL1" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$ ('. Ul1 '). MouseUp (function (e) {
$ (this). CSS (' background ', ' red ');
})
The MouseUp event occurs when the mouse button is relaxed on the element.
32.resize ()
$ (window). Resize (function () {
Alert ("Window size has changed!")
})
Trigger event when resizing the browser window
33.scroll ()
$ (window). Scroll (function () {
Alert ("scroll bar Moved")
})
Trigger event when the scrollbar of a matching element moves
34.select ()
<input type= "text" id= "text" >
$ (' #text '). Select (function () {
CLG (' select ');
})
The Select event occurs when the text in the input element of the textarea or text type is selected
35.submit ()
$ (' form '). Submit ()
Submit Form
$ (' form '). Submit (function () {
Alert ("Submit Form")
})
The Submit event occurs when a form is submitted.
jquery Code excerpt (event)