* [`click`](#usage-click) | [`dblclick`](#usage-dblclick) * [`mouseenter`](#usage-mouseenter) | [`mouseleave`](#usage-mouseleave) | [`mousemove`](#usage-mousemove) | [`mousedown`](#usage-mousedown) | [`mouseup`](#usage-mouseup) | [`mouseover`](#usage-mouseover) | [`mouseout`](#usage-mouseout) | [`hover`](#usage-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** ```javascript $('#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** ```javascript $('.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** ```javascript $('.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** ```javascript $('.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** ```javascript $('.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** ```javascript $('.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** ```javascript $(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** ```javascript $('.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** ```javascript $('.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** ```javascript $('.card').hover( function(e) { $(this).addClass('shadow-lg'); }, // On Enter function(e) { $(this).removeClass('shadow-lg'); } // On Leave ); ```