♦ jQuery Events
♣ About jQuery Events
There exist events such as click, scroll, etc, upon which certain task has to be performed on HTML elements.These events are the basic I/O operations used by the user.
Below is a tabular representation of Events
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
♣ Example1: jQuery click()
The click() method is used, when we need an action to be performed upon click.The click is done on HTML element.
A particular function can be executed upon click which can altogether have multiple functionalities.
Below is the representation of click() Syntax.
Basic Syntax
$(selector).click(function(){
//code_block
})
//code_block
})
Syntax Explanation:
selector : element selector for event to be performed
code_block : code for execution, which will execute when event is performed
In this example, .code_block : code for execution, which will execute when event is performed
Example
Input:
Output:
♣ Example2: jQuery dblclick()
The dblclick() method is used, when we need an action to be performed upon double click.The click is done on HTML element.
Below is the representation of dblclick() Syntax.
Basic Syntax
$(selector).dblclick(function(){
//code_block
})
//code_block
})
Syntax Explanation:
selector : element selector for event to be performed
code_block : code for execution, which will execute when event is performed
In this example, .code_block : code for execution, which will execute when event is performed
Example
Input:
Output:
♣ Example3: jQuery mouseenter()
The mouseenter() method is used, when we need a action to be performed upon a mouse entering an HTML element region.Below is the representation of mouseenter() Syntax.
Basic Syntax
$(selector).mouseenter(function(){
//code_block
})
//code_block
})
Syntax Explanation:
selector : element selector for event to be performed
code_block : code for execution, which will execute when event is performed
In this example, .code_block : code for execution, which will execute when event is performed
Example
Input:
Output:
♣ Example4: jQuery mouseleave()
The mouseleave() method is used, when we need an action to be performed upon a mouse leaving an HTML element region.Below is the representation of mouseleave() Syntax.
Basic Syntax
$(selector).mouseleave(function(){
//code_block
})
//code_block
})
Syntax Explanation:
selector : element selector for event to be performed
code_block : code for execution, which will execute when event is performed
In this example, .code_block : code for execution, which will execute when event is performed
Example
Input:
Output:
♣ Example5: jQuery hover()
The hover() method is used, when we need a action to be performed upon a mouse hovering an HTML element region.In this case the action will be performed until the mouse cursor stays on the HTML element region.
Below is the representation of hover() Syntax.
Basic Syntax
$(selector).hover(function(){
//code_block
})
//code_block
})
Syntax Explanation:
selector : element selector for event to be performed
code_block : code for execution, which will execute when event is performed
In this example, .code_block : code for execution, which will execute when event is performed
Example
Input:
Output:
♣ Example6: jQuery focus()
The focus() method is used in form field functioning.Action is executed when the form input is active to be entered.
Below is the representation of focus() Syntax.
Basic Syntax
$(selector).focus(function(){
//code_block
})
//code_block
})
Syntax Explanation:
selector : element selector for event to be performed
code_block : code for execution, which will execute when event is performed
In this example, .code_block : code for execution, which will execute when event is performed
Example
Input:
Output:
♣ Example7: jQuery blur()
The blur() method is used in form field functioning.Action is executed when the form input is not-active to be entered.
Below is the representation of blur() Syntax.
Basic Syntax
$(selector).blur(function(){
//code_block
})
//code_block
})
Syntax Explanation:
selector : element selector for event to be performed
code_block : code for execution, which will execute when event is performed
In this example, .code_block : code for execution, which will execute when event is performed
Example
Input:
Output:
♣ Example8: jQuery on()
The on() method can be used when we want multiple(including single) event handling to be attached.This is a many-to-many relation between events and actions.
Below is the representation of on() Syntax.
Basic Syntax
$(selector).on(function(){
//code_block
})
//code_block
})
Syntax Explanation:
selector : element selector for event to be performed
code_block : code for execution, which will execute when event is performed
In this example, .code_block : code for execution, which will execute when event is performed
Example
Input:
Output: