Open In App

jQuery Event Methods Complete Reference

Improve
Improve
Like Article
Like
Save
Share
Report

An event refers to the actions performed by the site visitor during their interactivity with the website (or webpage). There can be various types of events such as

  • The user clicks on the button.
  • The user moves the mouse pointer over an image.
  • The user pressed any key from the keyboard, etc.

Syntax:

$(selector).method(function) 

Example:

html




<!DOCTYPE html>
<html>
  
<head>
    <script src=
</script>
    <style type="text/css">
        #e5 {
            width: 100px;
            height: 100px;
            border-radius: 0px;
            background-color: aqua;
        }
    </style>
</head>
  
<body>
    <p id="e1">Welcome.</p>
    <p id="e2">Learn and Explore</p>
    <p>
        <input type="text" id="e3" value="jQuery is powerful!" />
    </p>
    <p id="e4" align="left">Geeks for Geeks</p>
    <p>
        <div id="e5"></div>
    </p>
    <button id="gfg1">Change Text</button>
    <button id="gfg2">Change HTML</button>
    <button id="gfg3">Change Value</button>
    <button id="gfg4">Change Alignment</button>
    <button id="gfg5">Change Shape</button>
    <script type="text/javascript">
        $("#gfg1").click(function() {
            $("#e1").text("Geeks for Geeks");
        });
        $("#gfg2").click(function() {
            $("#e2").html("<b>Enrich your Knowledge.</b>");
        });
        $("#gfg3").click(function() {
            $("#e3").val("jQuery at Geeks for Geeks");
        });
        $("#gfg4").click(function() {
            $("#e4").attr("align", "center");
        });
        $("#gfg5").click(function() {
            $("#e5").css("border-radius", "50px");
        });
    </script>
</body>
  
</html>


Output: Before and After clicking on buttons.

 

 

The complete list of jQuery Events is given below:

Methods:

jQuery Event Methods

Description

Example

jQuery bind() Method This is used to attach one or more event handlers for selected elements.
Try

jQuery blur() Method The jQuery blur() is an inbuilt method that is used to remove focus from the selected element. 
Try

jQuery change() Method The jQuery change() is an inbuilt method that is used to detect the change in the value of input fields. 
Try

jQuery click() Method The jQuery click() is an inbuilt method that starts the click event or attaches a function to run when a click event occurs.
Try

jQuery dblclick() Method The jQuery dblclick() is an inbuilt method that is used to trigger the double-click event to occur.
Try

jQuery event.isDefaultPrevented() Method This is an inbuilt method that checks whether the preventDefault() method was called for the event.
Try

jQuery event.isImmediatePropagationStopped() Method This is used to check whether this method was called for the event or not.
Try

jQuery event.isPropagationStopped() Method This is used to check whether the object event.stopPropagation() is called or not.
Try

jQuery event.preventDefault() Method This is used to stop the default action of the selected element to occur.
Try

jQuery event.stopImmediatePropagation() Method In jQuery used to stop the rest of the event handlers from being executed for the selected element. 
Try

jQuery event.stopPropagation() Method This  is used to stop the windows propagation
Try

jQuery focus() Method This is used to focus on an element. The element gets focused by the mouse click or by the tab-navigating button. 
Try

jQuery focusin() Method The jQuery focusin() is an inbuilt method that is used to gain focus on the selected element. 
Try

jQuery focusout() Method The jQuery focusout() is an inbuilt method that is used to remove focus from the selected element. 
Try

jQuery hover() Method This is used to specify two functions to start when mouse pointer move over the selected element.
Try

jQuery Keydown() Method This is used to trigger the keydown event whenever User presses a key on the keyboard.
Try

jQuery keypress() Method The jQuery keypress() method triggers the keypress event whenever browser registers a keyboard input.
Try

jQuery keyup() Method This is used to trigger the keyup event whenever the User releases a key from the keyboard. 
Try

jQuery load() Method jQuery load() method is a simple but very powerful AJAX method. 
Try

jQuery mousedown() Method This is an inbuilt method that works when the left mouse button is pressed down over the selected element. 
Try

jQuery mouseenter() Method  This is an inbuilt method that works when the mouse pointer moves over the selected element. 
Try

jQuery mouseleave() Method This is an inbuilt method that works when the mouse pointer leaves the selected element. 
Try

jQuery mousemove() Method This is an inbuilt method that is used when the mouse pointer moves over the selected element. 
Try

jQuery mouseout() Method This is an inbuilt method that is used when the mouse pointer moves out from the selected element. 
Try

jQuery mouseover() Method This is an inbuilt method that works when the mouse pointer moves over the selected elements. 
Try

jQuery mouseup() Method This is an inbuilt method that works when the mouse left button is released over a selected element. 
Try

jQuery on() Method This is used to attach one or more event handlers for the selected elements and child elements in the DOM tree.
Try

jQuery one() Method The jQuery one() method is an inbuilt method that attaches one or more event handlers for the selected element.
Try

jQuery ready() Method The jQuery ready() method helps to load the whole page and then execute the rest code.
Try

jQuery resize() Method The jQuery resize() method is an inbuilt method that is used when the browser window changes its size. 
Try

jQuery scroll() Method The jQuery scroll() is an inbuilt method that is used to user scroll in the specified element.
Try

jQuery select() Method This is used when some letters or words are selected (or marked) in a text area or a text field. 
Try

jQuery submit() Method The jQuery submit() method is used to submit events or attaches a function to run when a submit event occurs. 
Try

jQuery trigger() Method The jQuery trigger() method is a method that is used to trigger a specified event handler on the selected element. 
Try

jQuery triggerHandler() Method The jQuery triggerHandler() Method is used to trigger a specified event for the selected element. 
Try

jQuery undelegate() Method This is used to remove the specified event handler from the selected element.
Try

Properties:

jQuery Properties

Description

Example

jQuery event.currentTarget Property This is used to return the current DOM element within the event bubbling phase.
Try

jQuery event.data Property This is used to contain the optional data which is passed to an event method.
Try

jQuery event.delegateTarget Property This is used to return the element where the currently-called jQuery event handler was attached
Try

jQuery event.namespace Property The jQuery event.namespace property is used to return the custom namespace whenever the event is triggered.
Try

jQuery event.pageX Property This is used to find the position of the mouse pointer relative to the left edge of the document.
Try

jQuery event.pageY Property This is used to find the position of the mouse pointer relative to the top edge of the document.
Try

jQuery event.relatedTarget Property This is used to find which element is being entered or gets exited on mouse movement.
Try

jQuery event.result Property This is used to find the last and previous values returned.
Try

jQuery event.target Property This is used to find which DOM element will start the event.
Try

jQuery event.timeStamp Property This is used to measure the difference in milliseconds between the time of the event created by the browser and January 1, 1970.
Try

jQuery event.type Property This is used to return which event type is started.
Try

jQuery event.which Property This is used to return which keyboard key or mouse button was pressed for the event.
Try



Last Updated : 03 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads