Table of Contents
click|dblclickmouseenter|mouseleave|mousemove|mousedown|mouseup|mouseover|mouseout|hover
.click
Description Bind an event handler to the "click" event, or trigger it.
Parameters
handler(Function, optional): Function to execute.
Returns
- (jBase): Current instance.
Example
$('#btn').click(function() {
alert('Clicked!');
});
.dblclick
Description Bind an event handler to the "dblclick" event, or trigger it.
Parameters
handler(Function, optional): Function to execute.
Returns
- (jBase): Current instance.
Example
$('.item').dblclick(function() {
$(this).toggleClass('expanded');
});
.mousedown
Description Bind an event handler to the "mousedown" event (mouse button is pressed), or trigger it.
Parameters
handler(Function, optional): Function to execute.
Returns
- (jBase): Current instance.
Example
$('.btn').mousedown(function() {
$(this).addClass('active-state');
});
.mouseup
Description Bind an event handler to the "mouseup" event (mouse button is released), or trigger it.
Parameters
handler(Function, optional): Function to execute.
Returns
- (jBase): Current instance.
Example
$('.btn').mouseup(function() {
$(this).removeClass('active-state');
});
.mouseenter
Description
Bind an event handler to be fired when the mouse enters an element. This event does not bubble (unlike mouseover).
Parameters
handler(Function): Function to execute.
Returns
- (jBase): Current instance.
Example
$('.card').mouseenter(function() {
$(this).addClass('hover-effect');
});
.mouseleave
Description
Bind an event handler to be fired when the mouse leaves an element. This event does not bubble (unlike mouseout).
Parameters
handler(Function): Function to execute.
Returns
- (jBase): Current instance.
Example
$('.card').mouseleave(function() {
$(this).removeClass('hover-effect');
});
.mousemove
Description Bind an event handler to the "mousemove" event, or trigger it.
Parameters
handler(Function, optional): Function to execute.
Returns
- (jBase): Current instance.
Example
$(document).mousemove(function(e) {
console.log('Coords: ', e.pageX, e.pageY);
});
.mouseover
Description Bind an event handler to the "mouseover" event. This event bubbles (triggers if mouse enters a child element).
Parameters
handler(Function, optional): Function to execute.
Returns
- (jBase): Current instance.
Example
$('.container').mouseover(function() {
// Handle bubbling mouseover
});
.mouseout
Description Bind an event handler to the "mouseout" event. This event bubbles.
Parameters
handler(Function, optional): Function to execute.
Returns
- (jBase): Current instance.
Example
$('.container').mouseout(function() {
// Handle bubbling mouseout
});
.hover
Description
Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. This is a convenient shorthand for chaining .mouseenter() and .mouseleave().
Parameters
handlerIn(Function): A function to execute when the mouse pointer enters the element.handlerOut(Function): A function to execute when the mouse pointer leaves the element.
Returns
- (jBase): Current instance for chaining.
Example
$('.card').hover(
function(e) { $(this).addClass('shadow-lg'); }, // On Enter
function(e) { $(this).removeClass('shadow-lg'); } // On Leave
);