jQuery Events List with Example

by

jQuery Events list example; In this tutorial, i am going to show you jQuery events list with example.

jQuery Events List with Example

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.

Events List in jQuery

  • Mouse Events
  • Keyboard Events
  • Form Events
  • Document/Window Events

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 NameDescriptionExample
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();
});

Leave a Comment