jquery Code excerpt (event)

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)