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
