jQuery Event Methods
jQuery was created specifically to react to events in HTML pages.
What are Events?
Events refer to all of the many visitor activities to which a web page can respond.
An event is the exact time when something is taking place.
Examples :-
- dragging the mouse over a component
- Choose a button for radio
- Clicking on an element
When it comes to occurrences, the phrase "fires/fired" is frequently employed. "Whenever you press a key, the keypress event is triggered".
Some of the most common DOM occurrences are listed here :
Mouse Events | Keyboard Events | Form Events | Document/Window Events |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
jQuery Syntax For Event Methods
Most DOM events have a jQuery method that corresponds to them in jQuery.
You may use the following code to add a click event to all paragraphs on a page :
$("p").click();
The following step is to specify what should happen if the event occurs. You'll need to provide the event a function :
$("p").click(function(){
// action goes here!!
});
Commonly Used jQuery Event Methods
$(document).ready()
When the document is entirely loaded, the $(document).ready()
method allows us to run a function. This event is previously covered in the chapter on jQuery Syntax.
The click() and dblclick() methods
An event handler (mouse single click) function is attached to an HTML element through the
click()
event method.
When the user clicks on an HTML element, the click()
function is executed.
An event handler (mouse double click) function is attached to an HTML element using the
dblclick()
event method.
When the user double clicks on an HTML element, the dblclick()
function is executed.
Example :- Hide the current p
element with class="single"
when a click event is fired and Hide the current p
element with
class="double"
when a dblclick event is fired
If you click on me, I will disappear.
If you double click on me, I will disappear.
You cannot hide me!
Output :-
If you click on me, I will disappear.
If you double click on me, I will disappear.
You cannot hide me!
The mouseenter() and mouseleave() methods
An event handler (mouse enter) function is attached to an HTML element using the mouseenter()
event method.
When the mouse pointer enters the HTML element, the mouseenter()
function is called.
An event handler (mouse leave) function is attached to an HTML element using the mouseleave()
event method.
When the mouse pointer exits the HTML element, the mouseleave()
function is called.
I will hide the 3rd paragraph while mouse enter on me!
I will show the 3rd paragraph while mouse leave from me!
I am 3rd paragraph!
Output :-
I will hide the 3rd paragraph while mouse enter on me!
I will show the 3rd paragraph while mouse leave from me!
I am 3rd paragraph!
Related Links
The mousedown() and mouseup() methods
The mousedown()
method defines a mouse down event handler to an HTML element.
When the mouse button (left, centre, or right) is pushed the mousedown()
function is executed.
The mouseup()
method defines a mouse up event handler to an HTML element.
When the mouse button (left, centre, or right) is relesed the mouseup()
function is executed.
Example :-
I will hide the 3rd paragraph when mouse down on me!
I will show the 3rd paragraph when mouse up on me!
I am 3rd paragraph!
Output :-
I will hide the 3rd paragraph when mouse down on me!
I will show the 3rd paragraph when mouse up on me!
I am 3rd paragraph!
Tip: In the first paragraph press the mouse button (don't relese the button) and in the second paragraph press the mouse button (wait few seconds) then relese it.
hover()
The mouseenter()
and mouseleave()
methods are combined in the
hover()
method, which takes two functions.
The first function is executed when the mouse enters to an HTML element and the second function is executed when the mouse exits from the HTML element.
Exmple :-
This is a paragraph.
Output :-
This is a paragraph.
The focus() and blur() methods
An event handler (focus) function is attached to an HTML form field using the focus()
event method.
When a form field receives cursor attention or activated, the focus()
function is performed :
An event handler (blur) function is attached to an HTML form field using the blur()
technique.
When a form field loses cursor attention or focus, the blur()
function is executed.
Example :-
Name:
Email:
Output :-
Name:
Email:
Related Links
The on() Method
The on()
function is used add one or more event handlers to an selected HTML element.
A HTML element can have numerous event handlers attached to it using on()
method.
Example :-
Click or move the mouse pointer over this paragraph.
Output :-
Click or move the mouse pointer over this paragraph.