• Jquery for Beginners – Event Handling

    Posted on July 3, 2012 by in Jquery, Other Programming

    Events are actions that can be detected by your application such as mouse click, mouse over, keydown, page load, focus, scroll etc. Event handlers are methods that are called when any event is triggered or fired.

    Attaching/Binding and Event

    For example, let’s say we have

    "<a id="lnkalert">Alert!</a>"

    in our document, and we want to attach a click handler to it that generates an alert message. In jQuery, we might do so with the following code

    $(document).ready(function() {
      $('#lnkalert').click(function() {
        alert('this is an alert message');
      });
    });
    

    this can also be done using the bind function as below

    $(document).ready(function() {
      $('#lnkalert').bind("click",function() {
        alert('this is an alert message');
      });
    });
    

    Please note that both the methods works only on elements that are already loaded when the DOM is ready, i.e it does not work with elements that loaded dynamically using java script at run time. If you want attach a event to dynamically added event you use “live” or “on” depending on the version of JQuery you are using

    $(document).ready(function() {
      //for earlier versions of JQuery
      $('#lnkalert').live("click",function() {
        alert('this is an alert message');
      });
      //for Jquery 1.7 and higher
      $('#lnkalert').on("click",function() {
        alert('this is an alert message');
      });
    });
    

    Removing/Binding and Event

    $(document).ready(function() {
      $('#lnkalert').unbind("click",function() {
          //code here
      });
    });
    

    We can use “Off” if we want remove an event handler for and element created dynamically.

    Jquery Events

    List of events that are often used by developers

    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

    All the above events can be used similar to click event shown above.

    Be Sociable, Share!

    Written by

    Vanamali Juvvadi is a Web enthusiast and loves all things design and technology. Founded qnownow with a group of friends to share anything/everything they know/find on the internet.

    View all articles by

    Email : [email protected]

    One Responseso far.

    1. kevin roy says:

      Vanamali Juvvadi,

      Keep up the good work. It is awesome to have a site where tutorials show client side development and also server side development using the latest technologies.

      Google needs more sites like this in it’s index !

    Leave a Reply