jQuery Event Method; In this tutorial, you will learn how many events methods in jQuery and how to use with HTML elements.
jQuery Event Methods
jQuery events are those tasks that can be detected by your web application. They are used to create dynamic web pages. An event represents the exact moment when something happens.
These are some examples of jQuery events:
- A mouse click,hover etc.
- Selecting a radio button.
- An HTML form submission.
- clicking on an element.
- Scrolling of the web page etc.
List of jQuery Event Methods
Mouse Events
- click
- dblclick
- mouseenter
- mouseleave
Keyboard Events
- keyup
- keydown
- keypress
Form Events
- submit
- change
- blur
- focus
Document/Window Events
- load
- unload
- scroll
- resize
Syntax for event methods
Most DOM events have the equivalent jQuery method. To assign one click event to all paragraphs on one page, you can do this.
$("p").click();
The next step is to define what should happen when the event fires. You must pass a function to the event:
$("p").click(function(){
// action goes here!!
});
Daily Used jQuery Event Methods
| Event Name | Description | Example |
| click() | The click() method attaches an event handler function to an HTML element. | $(“p”).click(function(){ $(this).hide(); }); |
| dbclick() | The dbClick() method attaches an event handler function to an HTML element. | $(“p”).dblclick(function(){ $(this).hide(); }); |
| mouseenter() | The mouseenter() method combines an event element handler function with an HTML element. | $(“#p1”).mouseenter(function(){ alert(“You entered p1!”); }); |
| Mouseleave() | The Mouseleave() method attaches event element handler function to HTML element. | $(“#p1”).mouseleave(function(){ alert(“Bye! You now leave p1!”); }); |
| mouseup() | The mouseup() method attaches the event element handler function to the HTML element. | $(“#p1”).mouseup(function(){ alert(“Mouse up over p1!”); }); |
| mousedown() | The Mousedown() method attaches the event element handler function to the HTML element. | $(“#p1”).mousedown(function(){ alert(“Mouse down over p1!”); }); |
| hover() | The hover() method works two and is a combination of mouseenter() and mousleave() methods. | $(“#p1”).hover(function(){ alert(“You entered p1!”); }, function(){ alert(“Bye! You now leave p1!”); }); |
| on() | The On () method attaches one or more event handlers to selected elements. | $(“p”).on(“click”, function(){ $(this).hide(); }); |
