List of JQUERY Events

Mouse events
ClickMouse click of button or on text
Double ClickMouse Double click of button
HoverMouse over and Mouse Out events
event.pageX & pageYPosition of Mouse from left edge and Top
mousemoveMouse move over selected element
mouseenter mouseleaveMouse entry and exit events over selected element

  • Video Tutorial on Mouse Events

Keyboard events
KeyupEvent to trigger on Key up
KeydownEvent to trigger when Key is down
KeypressEvent to trigger when Key is pressed
event.whichGetting number of pressed key

  • Video Tutorial on keyboard Events

Form or form component
FocusEvent to trigger on Focus
blurEvent to trigger on lost Focus

  • Video Tutorial on form component events

Browser related Events
resize()Size of the window is changed
scrollWhen Page or element scroll

  • Video Tutorial on window Events

key holdingFind out the duration of a key press ( in hold condition ) by using keydown and keyup events
Password validationDisplay messages helping user to create password

Multiple event

We can combine multiple events and run the same code. Each event has to be separated by a space.

$('#id_dtl').bind('blur keyup', function(){
// Your code here
Here either blur or keyup any one event can fire the code inside.

How to identify which event has occurred

We can use e.type to get the details of the event.
$("#b1").on('dblclick click',function(e){
$("#t1").html('Your type of Click event  : '+e.type);

Practice Questions

  1. Welcome Message should display on click of a button
  2. Use timer to remove the message after 2 seconds.
  3. I have three radio buttons to select one of the available sections, display a message saying welcome to that particular section once the user clicks any radio button. ( Hint : Use common class for all three radio buttons ).
  4. Display welcome message on Double click of a button. Create another trigger to display different message for a single click.
  5. In above code use one single function to display common message for double click or single click on a button.
  6. Create one textarea and count the number of chars entered by the user. The counter should increase or decrease as the user type chars or delete chars inside the texterea.


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer