jQuery | Event Methods Complete Reference
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
- User clicks on the button.
- User moves mouse pointer over an image.
- User pressed any key from keyboard, etc.
Example:
<!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 > |
chevron_right
filter_none
Output:
Before clicking on buttons:
After clicking on buttons:
The complete list of jQuery Events are given below:
- jQuery | bind() with Examples
- jQuery | blur() with Examples
- jQuery | change() with Examples
- jQuery | click() with Examples
- jQuery | dblclick() with Examples
- jQuery | event.currentTarget Property
- jQuery | event.data Property
- jQuery | event.delegateTarget Property
- jQuery | event.isDefaultPrevented() Method
- jQuery | event.isImmediatePropagationStopped() Method
- jQuery | event.isPropagationStopped() Method
- jQuery | event.namespace Property
- jQuery | event.pageX property with Examples
- jQuery | event.pageY property with examples
- jQuery | event.preventDefault() Method
- jQuery | event.relatedTarget Property with Example
- jQuery | event.result Property with Examples
- jQuery | event.stopImmediatePropagation() Method
- jQuery | event.stopPropagation() Method
- jQuery | event.target Property with Example
- jQuery | event.timeStamp property with Example
- jQuery | event.type property
- jQuery | event.which property
- jQuery | focus() with Examples
- jQuery | focusin() with Examples
- jQuery | focusout() with Example
- jQuery | hover() with Examples
- jQuery | Keydown() with Examples
- jQuery | keypress()
- jQuery | keyup() with Examples
- jQuery | load() with Examples
- jQuery | mousedown() with Examples
- jQuery | mouseenter() with Examples
- jQuery | mouseleave() with Examples
- jQuery | mousemove() with Examples
- jQuery | mouseout() with Examples
- jQuery | mouseover() with Examples
- jQuery | mouseup() with Examples
- jQuery | on() with Examples
- jQuery | one() with Examples
- jQuery | ready() with Examples
- jQuery | resize() with Examples
- jQuery | scroll() with Examples
- jQuery | select() with Examples
- jQuery | submit() with Examples
- jQuery | trigger() Method
- jQuery | triggerHandler() Method
- jQuery | undelegate() with Examples