List of jQuery Api Events Handling Methods

jQuery Events Methods – Today we will learn about jquery events methods, how is use in web pages. We will about all jquery events.

jQuery Events

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

  • A mouse click,hover etc.
  • Selecting a radio button.
  • An HTML form submission.
  • clicking on an element.
  • Scrolling of the web page etc.

Here are some common DOM 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();
});

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *