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 > |
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