Search within TutorialsPark

Jquery Mouse Events


Learn to use jQuery events that are triggered by Mouse Movement and Press


jQuery Events: Mouse Events

jQuery has a set of methods to use and handle mouse events.

Table : Mouse Event Methods

Method Description
click(function) To bind function to be called when the element is clicked.
dbclick(function) To bind handler to be called when the element is double-clicked
focusin(function) To bind function to be called when the element or a descendant/mouse focus.
focusout(function) To bind function to be called when the elements, or a descendant, gains keyboard/mouse focus.
hover(function)
hover(function, function)
To bind function to be called when the mouse enters the element, and also the function to be called when the mouse leaves it.
mousedown(function) To bind function to be called when the mouse button is pressed within the element.
mouseenter(function) To bind function to be called when the mouse pointer enters the element. It is not affected by event bubbling
mouseenter(function) To trigger the handler function on the first element in the jQuery object, without performing the default action or bubbling the event.
mouseleave(function) To bind function to be called when the mouse pointer leaves the element. It is not affected by event bubbling.
mousemove(function) To bind function to be called when the mouse pointer moves within the element
mouseout(function) To bind function to be called when the mouse pointer enters the element.
mouseover(function) To bind function to be called when the mouse pointer enters the element.
mouseup(function) To bind function to be called when the mouse button is released within the element.

jQuery Mouse Events : Using the Click Function

The jQuery method of click() is used to bind an event handler to the JavaScript event, or triggers that event on an element.

Example: Using the Click Function

Give it a TRY! » Note: The parameter within the function is executed each time the event is triggered.


jQuery Mouse Event: Using the dblclick() Method

A jQuery method of dblclick(function) corresponds to bdlclick event, it is triggered when the user presses and releases the mouse twice in quick succession

Example: Using the dblclick() Method

Give it a TRY! » Note: The parameter is function that is executed each time the event is triggered.


jQuery Mouse Events : Using the focusin() Method

The jQuery method of focusin() corresponds to the focusin event, it is triggered when the element gains the focus.

Example: Using the focusin() Method

Give it a TRY! » Note: It returns a jQuery object which can be used for chaining purposes.


jQuery Mouse Events : Using the focusout() Method

The jQuery method of focusout() corresponds to focusout event, it is triggered when the element loses the focus.

Example: Using the focusout() Method

Give it a TRY! » Note:The parameter is a function that is execute each time the event in triggered.


jQuery Mouse Events : Using the hover() function

The jQuery method hover(enter_function, leave_function) is triggered when the mouse enters or leaves an element. When one function is specified, it is used for both enter and exit events.

Example: Using the hover() Function

Give it a TRY! » Note:The parameter is a function that is execute each time the event in triggered.


jQuery Mouse Events : Using the mouseenter() Method

The jQuery method of mouseenter() corresponds the mouseenter event, it is triggered when the mouse enters the region of screen occupied by an element.

Example: Using the mouseenter() Method

Give it a TRY! » Note:The parameter is a function that is execute each time the event in triggered.


jQuery Mouse Events : Using the mouseleave() Method

The jQuery method of mouseleave() corresponds to the mouseleave event, it is triggered when the mouse leaves the region of screen occupied by an element.

Example: Using the mouseleave() Method

Give it a TRY! » Note:The parameter is a function that is execute each time the event in triggered.


jQuery Mouse Events : Using the mousemove() Method

The jQuery method of mousemove() corresponds to the mousemove event, it is triggered when the mouse is moved within the region of screen occupied by an element.

Example: Using the mousemove() Mehtod

Give it a TRY! » Note:The parameter is a function that is execute each time the event in triggered.


jQuery Mouse Events : Using the mouseout() Method

The jQuery method of mouseout(function) corresponds to the event mouseout , it is triggered when the mouse is moved out of the region of screen occupied by an element.

Example: Using the mouseout() Method

Give it a TRY! » Note:The parameter is a function that is execute each time the event in triggered.


jQuery Mouse Events : Using the mouseover() Method

The jQuery method of mouseover(function) corresponds to the event mouseover , it is triggered when the mouse moves over the region of screen occupied by an element.

Example: Using the mouseover() Method

Give it a TRY! » Note:The parameter is a function that is execute each time the event in triggered..


jQuery Mouse Events : Using the mouseup() Method

The jQuery method of mouseup(function) corresponds to the event mouseup , it is triggered when the mouse button is pressed over an element.

Example: Using the mouseup() Method

Give it a TRY! » Note:The parameter is function that is execute each time the event in triggered.