jQuery Event Methods

jQuery Event Methods

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:

  1. A mouse click,hover etc.
  2. Selecting a radio button.
  3. An HTML form submission.
  4. clicking on an element.
  5. 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 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();
});

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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