List of JQUERY Events

Mouse events
EventDescription
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
EventDescription
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
EventDescription
FocusEvent to trigger on Focus
blurEvent to trigger on lost Focus


  • Video Tutorial on form component events


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


  • Video Tutorial on window Events


Applications
EventDescription
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.


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



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







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    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 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer