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. | |
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 |
Example |
---|---|---|
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. |
Recommended Articles