jQuery Events

jQuery event methods trigger or attach a event handler function for the selected elements.
These methods are used to register behaviors to take effect when the user interacts with the browser, and to further manipulate those registered behaviors.

What are Events?
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
Jquery event list are given below :
$(selector).click(function)

The click event occurs when an element is clicked.

The " click() " method triggers the click event, or attaches a function to run when a click event occurs.

Syntax $(selector).click(function);
Note:
function: Specifies the function to run when the click event occurs
example:
Demo:
$(selector).dblclick(function)

The dblclick event occurs when an element is double-clicked.

The " dblclick() " method triggers the dblclick event, or attaches a function to run when a dblclick event occurs.

Syntax $(selector).dblclick(function);
Note:
function: Optional. Specifies the function to run when the dblclick event occurs
example:
Demo:
$(selector).focus(function)

The focus event occurs when an element gets focus (when selected by a mouse click or by "tab-navigating" to it).

The " focus() " method triggers the focus event, or attaches a function to run when a focus event occurs.

Syntax $(selector).focus(function);
Note:
function: Optional. Specifies the function to run when the focus event occurs
example:
			
			USER NAME :
Demo:
USER NAME :
$(selector).hover(function)

The " hover() " method specifies two functions to run when the mouse pointer hovers over the selected elements.
This method triggers both the mouseenter and mouseleave events.

Note: If only one function is specified, it will be run for both the mouseenter and mouseleave events.
Syntax $(selector).hover(inFunction,outFunction);
Note:
inFunction: Required. Specifies the function to run when the mouseenter event occurs
outFunction: Optional. Specifies the function to run when the mouseleave event occurs
example:
			
			
This div is check for hover event in jquery
Demo:
This div is check for hover event in jquery

.blur(fn)

The blur event occurs when an element loses focus.
The " blur() " method triggers the blur event, or attaches a function to run when a blur event occurs.

Syntax $(selector).blur(function);
Note:
function: Optional. Specifies the function to run when the blur event occurs
example:
Demo:
city :
Address :
.change(fn)

The change event occurs when the value of an element is changed (only works on form fields).
The " change() " method triggers the change event, or attaches a function to run when a change event occurs.

Note: For select menus, the change event occurs when an option is selected. For text fields or text areas, the change event occurs when the field loses focus.
Syntax $(selector).change(function);
Note:
function: Optional. Specifies the function to run when the change event occurs
example:
			
			state :
Demo:
state :
.keypress(fn)

The " keypress() " method triggers the keypress event, or attaches a function to run when a keypress event occurs.
The keypress event is similar to the keydown event. The event occurs when a button is pressed down.
However, the keypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC). Use the keydown() method to also check these keys.

Syntax $(selector).keypress(function);
Note:
function: Optional. Specifies the function to run when the keypress event occurs
example:
			
			Enter your name: 
			
Keypresses: 0
Demo:
Enter your name:

Keypresses: 0


.keyup(fn)

The keyup event occurs when a keyboard key is released.
The " keyup() " method triggers the keyup event, or attaches a function to run when a keyup event occurs.

Syntax $(selector).keyup(function);
Note:
function: Optional. Specifies the function to run when the keyup event occurs
example:
			
			Enter your name: 
			
Enter your name in the input field above. It will change background color on keydown and keyup.
Demo:
Enter your name:

Enter your name in the input field above. It will change background color on keydown and keyup.


.keydown(fn)

The keydown event occurs when a keyboard key is pressed down.
The " keydown() " method triggers the keydown event, or attaches a function to run when a keydown event occurs.

Syntax $(selector).keydown(function);
Note:
function: Optional. Specifies the function to run when the keydown event occurs
example:
			
			Enter your name: 
			
Enter your name in the input field above. It will change background color on keydown and keyup.
Demo:
Enter your name:

Enter your name in the input field above. It will change background color on keydown and keyup.


.mouseover(fn)

The mouseover event occurs when the mouse pointer is over the selected element.
The " mouseover() " method triggers the mouseover event, or attaches a function to run when a mouseover event occurs.

Syntax $(selector).mouseover(function);
Note:
function: Optional. Specifies the function to run when the mouseover event occurs
example:
Demo:
.mouseout(fn)

The mouseout event occurs when the mouse pointer leaves the selected element.
The " mouseout() " method triggers the mouseout event, or attaches a function to run when a mouseout event occurs.

Syntax $(selector).mouseout(function);
Note:
function: Optional. Specifies the function to run when the mouseout event occurs
example:
Demo:
.submit(fn)

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to form elements.
Forms can be submitted either by clicking an explicit input type="submit", input type="image", or button type="submit", or by pressing Enter when certain form elements have focus.

Syntax $(selector).submit(function);
Note:
function: Optional. Specifies the function to run when the submit event occurs
example:
Demo:
$(selector).bind()

The " bind() " method attaches one or more event handlers for selected elements, and specifies a function to run when the event occurs.

Syntax $(selector).bind(event,data,function)
Note:
event: Required. Specifies one or more events to attach to the elements.
data: Optional. Specifies additional data to pass along to the function
function: Required. Specifies the function to run when the event occurs
example:
			    
			    
Click me for check bind event!
Demo:

Click me for check bind event!


.trigger()

The trigger() method triggers the specified event and the default behavior of an event (like form submission).

Syntax $(selector).trigger(event);
example:
					
					
Click me for check trigger event!
Demo:

Click me for check trigger event!


Questions for jquery events
  1. Why doesn't an event work on a new element I've created?
    2. Ans- events are bound only to elements that exist at the time when you issue your initial jQuery call. When you create a new element, you must bind the event to it separately, or use event delegation.
After editing Click here:
Output: