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:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</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 |
|---|---|
| jQuery bind() Method | This is used to attach one or more event handlers for selected elements. |
| jQuery blur() Method | The jQuery blur() is an inbuilt method that is used to remove focus from the selected element. |
| jQuery change() Method | The jQuery change() is an inbuilt method that is used to detect the change in the value of input fields. |
| 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. |
| jQuery dblclick() Method | The jQuery dblclick() is an inbuilt method that is used to trigger the double-click event to occur. |
| jQuery event.isDefaultPrevented() Method | This is an inbuilt method that checks whether the preventDefault() method was called for the event. |
| jQuery event.isImmediatePropagationStopped() Method | This is used to check whether this method was called for the event or not. |
| jQuery event.isPropagationStopped() Method | This is used to check whether the object event.stopPropagation() is called or not. |
| jQuery event.preventDefault() Method | This is used to stop the default action of the selected element to occur. |
| jQuery event.stopImmediatePropagation() Method | In jQuery used to stop the rest of the event handlers from being executed for the selected element. |
| jQuery event.stopPropagation() Method | This is used to stop the windows propagation |
| 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. |
| jQuery focusin() Method | The jQuery focusin() is an inbuilt method that is used to gain focus on the selected element. |
| jQuery focusout() Method | The jQuery focusout() is an inbuilt method that is used to remove focus from the selected element. |
| jQuery hover() Method | This is used to specify two functions to start when mouse pointer move over the selected element. |
| jQuery Keydown() Method | This is used to trigger the keydown event whenever User presses a key on the keyboard. |
| jQuery keypress() Method | The jQuery keypress() method triggers the keypress event whenever browser registers a keyboard input. |
| jQuery keyup() Method | This is used to trigger the keyup event whenever the User releases a key from the keyboard. |
| jQuery load() Method | jQuery load() method is a simple but very powerful AJAX method. |
| jQuery mousedown() Method | This is an inbuilt method that works when the left mouse button is pressed down over the selected element. |
| jQuery mouseenter() Method | This is an inbuilt method that works when the mouse pointer moves over the selected element. |
| jQuery mouseleave() Method | This is an inbuilt method that works when the mouse pointer leaves the selected element. |
| jQuery mousemove() Method | This is an inbuilt method that is used when the mouse pointer moves over the selected element. |
| jQuery mouseout() Method | This is an inbuilt method that is used when the mouse pointer moves out from the selected element. |
| jQuery mouseover() Method | This is an inbuilt method that works when the mouse pointer moves over the selected elements. |
| jQuery mouseup() Method | This is an inbuilt method that works when the mouse left button is released over a selected element. |
| jQuery on() Method | This is used to attach one or more event handlers for the selected elements and child elements in the DOM tree. |
| jQuery one() Method | The jQuery one() method is an inbuilt method that attaches one or more event handlers for the selected element. |
| jQuery ready() Method | The jQuery ready() method helps to load the whole page and then execute the rest code. |
| jQuery resize() Method | The jQuery resize() method is an inbuilt method that is used when the browser window changes its size. |
| jQuery scroll() Method | The jQuery scroll() is an inbuilt method that is used to user scroll in the specified element. |
| jQuery select() Method | This is used when some letters or words are selected (or marked) in a text area or a text field. |
| jQuery submit() Method | The jQuery submit() method is used to submit events or attaches a function to run when a submit event occurs. |
| jQuery trigger() Method | The jQuery trigger() method is a method that is used to trigger a specified event handler on the selected element. |
| jQuery triggerHandler() Method | The jQuery triggerHandler() Method is used to trigger a specified event for the selected element. |
| jQuery undelegate() Method | This is used to remove the specified event handler from the selected element. |
Properties:
jQuery Properties | Description |
|---|---|
| jQuery event.currentTarget Property | This is used to return the current DOM element within the event bubbling phase. |
| jQuery event.data Property | This is used to contain the optional data which is passed to an event method. |
| jQuery event.delegateTarget Property | This is used to return the element where the currently-called jQuery event handler was attached |
| jQuery event.namespace Property | The jQuery event.namespace property is used to return the custom namespace whenever the event is triggered. |
| jQuery event.pageX Property | This is used to find the position of the mouse pointer relative to the left edge of the document. |
| jQuery event.pageY Property | This is used to find the position of the mouse pointer relative to the top edge of the document. |
| jQuery event.relatedTarget Property | This is used to find which element is being entered or gets exited on mouse movement. |
| jQuery event.result Property | This is used to find the last and previous values returned. |
| jQuery event.target Property | This is used to find which DOM element will start the event. |
| 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. |
| jQuery event.type Property | This is used to return which event type is started. |
| jQuery event.which Property | This is used to return which keyboard key or mouse button was pressed for the event. |