jQuery Events



Whenever user try to perform certain action on the different elements of the webpage then response of web page to that action is called as Event.

Some Examples of Actions are :

Consider the following events –

  1. Clicking on Button
  2. Selecting Value from drop down menu
  3. Double Click on Text
  4. Submitting form
  5. Resizing the Window
  6. Scolling page up/down

Generally term “fire” is used when we trigger any event. i.e User fires “click” event on button in order to submit a form.

Syntax of Event :

Consider that, we want to trigger click event to all paragraphs then we can write below code for event assignment –

$("p").click();

Now we need to define what should happen when the event fires.

$("p").click(function(){
  // action goes here!!
});

Simple Examples :

Below code used to hide the h1 tag from the page on click event

<script>
$(document).ready(function(){
  $("h1").click(function(){
    $(this).hide();
  });
});
</script>

Below code used to hide the h1 tag from the page on double click event

<script>
$(document).ready(function(){
  $("h1").dblclick(function(){
    $(this).hide();
  });
});
</script>

Basic DOM events :

Event Type Description
blur Occurs when the element loses focus
change Occurs when the element changes
click Occurs when a mouse click
dblclick Occurs when a mouse double-click
error Occurs when there is an error in loading or unloading etc.
focus Occurs when the element gets focus
keydown Occurs when key is pressed
keypress Occurs when key is pressed and released
keyup Occurs when key is released
load Occurs when document is loaded
mousedown Occurs when mouse button is pressed
mouseenter Occurs when mouse enters in an element region
mouseleave Occurs when mouse leaves an element region
mousemove Occurs when mouse pointer moves
mouseout Occurs when mouse pointer moves out of an element
mouseover Occurs when mouse pointer moves over an element
mouseup Occurs when mouse button is released
resize Occurs when window is resized
scroll Occurs when window is scrolled
select Occurs when a text is selected
submit Occurs when form is submitted
unload Occurs when documents is unloaded