BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery Events

Last Updated: May 9, 2019 by Chaitanya Singh | Filed Under: jQuery

jQuery’s event API provides several useful methods that can be used to create dynamic web pages. Events are nothing but actions that you can perform on a web page such as mouse click, mouse hover, double click etc. In jQuery we can detect such events and can write a custom code (function) for each of these events. This gives us freedom to do whatever we want to do on an occurrence of an event, such custom functions are called event handlers. In this guide, we will discuss various events provided by jQuery event API.

jQuery Event Method Syntax

This is a button click event, it will trigger when we click on a button on a webpage.

$("button").click();

Now that we have detected a particular event using above code, our next step to write a custom code that executes when a button click event occurs. For this we have to write a custom function called event handler as shown below:

$("button").click(function(){
  // custom code for event handler
});

$(document).ready() method

Before we start learning various events, lets first understand the use of most commonly used method in jQuery. $(document).ready() method executes when a document (a web page) is fully loaded in the browser. We almost always write event handlers inside this method because we do not want to trigger an event when our page is not fully loaded.

We write a event handler inside $(document).ready() method like this: In the following example we are hiding all the paragraphs on a button click event. We have written the button click event handler inside $(document).ready() method so that the event only triggers when the page is fully loaded.

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

jQuery Events

jQuery Mouse Events

Tutorial link Description
click jQuery click event occurs when a user clicks on an html element.
dblclick jQuery dblclick event occurs when a user double clicks on an html element.
mouseenter jQuery mouseenter event occurs when the mouse pointer enters the html element.
mouseleave jQuery mouseleave event occurs when the mouse pointer leaves the html element.
mousedown jQuery mousedown event occurs when any of the mouse button is pressed down while the mouse pointer is over an html element.
mouseup jQuery mouseup event occurs when any of the mouse button is released while the mouse pointer is over an html element.
hover jQuery hover event is a combination of mouseenter() and mouseleave() methods. First event handler function executes when mouse pointer enters the html element and the second event handler function executes when the mouse pointer leaves the html element.

jQuery Form Events

Tutorial link Description
focus jQuery focus event occurs when a form field gets focus.
blur jQuery blur event occurs when a form field loses focus.
submit jQuery submit event occurs when a form is submitted.
change jQuery change event occurs when the value of an element has been changed. The applicable elements for this event are: <input>, <textarea> and <select>

jQuery Keyboard Events

Tutorial link Description
keypress jQuery keypress event occurs when a button is pressed down. The keypress event is not triggered for special keys such as ALT, CTRL, SHIFT, ESC.
keydown jQuery keydown event occurs when a keyboard key is pressed down. Unlike keypress event, this event is triggered for ALT, CTRL, SHIFT, ESC keys.
keyup jQuery keyup event occurs when a keyboard key is released

jQuery Window Events

 

Tutorial link Description
resize jQuery resize event occurs when the browser window is resized.
scroll jQuery scroll event occurs when user scrolls in the specified html element.
❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery mouseup() Method
  3. jQuery Sliding Effects
  4. jQuery mousedown() Method
  5. jQuery mouseenter() Method

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

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

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap