Keyboard & Mouse Events JQ Home  <<  JQ Advanced  <<  Keyboard & Mouse Events

In this second lesson on event handlers we look at the keyboard and mouse event methods available with jQuery.

The jQuery keyboard event methods in this suite allow us to bind event handlers to the keydown, keypress and keyup JavaScript events or trigger that event on the specified element.

The jQuery mouse event methods in this suite allow us to bind event handlers to mouse JavaScript events or trigger that event on the specified element.

Keyboard & Mouse Events Description
Keyboard
.keydown()Bind an event handler to The JavaScript keydown event, optionally passing a map of data or trigger that event on the specified element.
.keypress()Bind an event handler to The JavaScript keypress event, optionally passing a map of data or trigger that event on the specified element.
.keyup()Bind an event handler to The JavaScript keyup event, optionally passing a map of data or trigger that event on the specified element.
Mouse
.click()Bind an event handler to the click JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.dblclick()Bind an event handler to the dblclick JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.hover()Bind one or two event handlers to The JavaScript hover event that activate when the mouse pointer enters or leaves the specified element.
.mousedown()Bind an event handler to the mousedown JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.mouseenter()Bind an event handler to the mouseenter JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.mouseleave()Bind an event handler to the mouseleave JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.mousemove()Bind an event handler to the mousemove JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.mouseout()Bind an event handler to the mouseout JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.mouseover()Bind an event handler to the mouseover JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.mouseup()Bind an event handler to the mouseup JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.toggle() **REMOVED**
Bind two or more event handlers to the matched set that are executed cyclically on mouse clicks.

Keyboard Event Methods

Bind event handlers to the keydown, keypress and keyup JavaScript events, optionally passing a map of data or trigger that event on the specified element.

The .keydown() Method Top

Bind an event handler to The JavaScript keydown event or trigger that event on the specified element, optionally passing a map of data.

  • The keydown event is sent to an element when the user presses a key on the keyboard and can be attached to any element.

We use this methods .keydown( ) signature in our example below which triggers the JavaScript keydown event on the specified element.

The second signature .keydown( handler(eventObject) ) binds an event handler to The JavaScript keydown event.

The third signature .keydown( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript keydown event, optionally passing a map of data.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'div' element with an id of 'div1' every time the radio button for 'chicken pie' is clicked on. When the radio button is pushed we trigger off the keydown JavaScript event on the 'div1'. This then fires off the $('#div1').keydown(function(){}) code which outputs the message.

Pie Survey

Which pie do you prefer?:

Select a pie shape: 

div1. Some initial text.


$(function(){
  $('#div1').keydown(function () {
    $('#div1').append('<code>keydown</code> JavaScript event triggered.
                       You like Chicken Pie!!<br>');
  });
  $('#chicken').click(function() {
    $('#div1').keydown();
  });
});

The .keypress() Method Top

Bind an event handler to The JavaScript keypress event, optionally passing a map of data or trigger that event on the specified element.

  • The keypress event is sent to an element when the user presses a key on the keyboard and can be attached to any element.

We use this methods .keypress( [eventData ,] handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript keypress event, optionally passing a map of data.

The second signature .keypress( ) triggers The JavaScript keypress event on the specified element.

The third signature .keypress( handler(eventObject) ) binds an event handler to The JavaScript keypress event.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'p' element with an id of 'scrollspan3' each time the input element with an id of 'input3' below is pressed. When the input is typed in and the key pressed we run the function addText2(event) which triggers off the keypress JavaScript event on 'div6'. This then fires off the $('#input3').keypress({ param1: '#scrollspan3', param2: 'keypress', param3: '**JavaScript event triggered** ' }, addText2); code. What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan3', param2: 'keypress', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.


$(function(){
  $('#input3').keypress({ param1: '#scrollspan3', param2: 'keypress ', 
                          param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
  }
});

We will show a message here.

The .keyup() Method Top

Bind an event handler to The JavaScript keyup event, optionally passing a map of data or trigger that event on the specified element.

  • The keyup event is sent to an element when the user releases a key on the keyboard and can be attached to any element.

We use this methods .keyup( ) signature in our example below which triggers the JavaScript keyup event on the specified element.

The second signature .keyup( handler(eventObject) ) binds an event handler to The JavaScript keyup event.

The third signature .keyup( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript keyup event, optionally passing a map of data.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'div' element with an id of 'div3' every time the radio button for 'fish pie' is clicked on and released. When the radio button is pushed and released we trigger off the keyup JavaScript event on the 'div3'. This then fires off the $('#div3').keyup(function(){}) code which outputs the message.

Pie Survey

Which pie do you prefer?:

Select a pie shape: 

div3. Some initial text.


$(function(){
  $('#div3').keyup(function () {
    $('#div3').append('<code>keyup</code> JavaScript event triggered.
                       You like Fish Pie!!<br>');
  });
  $('#fish2').click(function() {
    $('#div3').keyup();
  });
});

Mouse Event Methods

Bind event handlers to mouse JavaScript events or trigger that event on the specified element.

The .click() Property Top

Bind an event handler to The JavaScript click event, optionally passing a map of data or trigger that event on the specified element.

We use this methods .click( ) signature in our example below which triggers the JavaScript click event on the specified element.

The second signature .click( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript click event.

The third signature .click( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript click event, optionally passing a map of data.

Examples of these signatures are available in the reference section.

In the example below we toggle the pie image with the id of 'pie1' when the user clicks anywhere in the div with an id of 'div14' or clicks the button below.

When the user clicks the button we trigger off the click JavaScript event on the 'div14' element. This then fires off the $('#div14').click(function(){}) code which shows the image.

Alternatively if you just click in the division the click event handler runs without being triggered to toggle the image.

a picture of pie 

$(function(){
  $('#btn1').click(function () {
    $('#div14').click();
  });
  $('#div14').click(function () {
    $('#pie1').toggle();
  });
});

Press the buttons below to action the above code:

The .dblclick() Property Top

Bind an event handler to The JavaScript dblclick event, optionally passing a map of data or trigger that event on the specified element.

We use this methods .dblclick( [eventData ,] handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript dblclick event, optionally passing a map of data.

The second signature .dblclick( ) triggers The JavaScript dblclick event on the specified element.

The third signature .dblclick( handler(eventObject) ) binds an event handler to The JavaScript dblclick event.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'p' element with an id of 'scrollspan9' each time the 'div' element with an id of 'div18' below is hovered over and the primary mouse button is double clicked inside this element.

When the primary mouse button is double clicked inside this element, The JavaScript dblclick event fires off the $('#div18').dblclick({ param1: '#scrollspan9', param2: 'dblclick ', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan9', param2: 'dblclick ', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.


$(function(){
  $('#div18').dblclick({ param1: '#scrollspan9', param2: 'dblclick ', 
                         param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
  }
});
div18. double click Here.

We will show a message here.

The .hover() Property Top

Bind two event handlers to The JavaScript hover event that activate when the mouse pointer enters or leaves the specified element.

We use this methods only signature .hover( handlerIn(eventObject) ,handlerOut(eventObject) ) in our example below which binds an event handler to the hover JavaScript event for entering the specified element and an event handler to the hover JavaScript event for leaving the specified element.

The second signature .hover( handlerInOut) ) binds an event handler to the hover JavaScript event for entering or leaving the specified element.

In the example below when we hover over a 'td' element we change the background colour to olive. When we leave a 'td' element we change the background colour to orange.

Table For Testing The .hover( handlerIn(eventObject) ,handlerOut(eventObject) ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('.testtable td').hover(
    function () {
      $(this).css('backgroundColor', 'olive');
    }, 
    function () {
      $(this).css('backgroundColor', 'orange');
    }
  );
});

The .mousedown() Property Top

Bind an event handler to The JavaScript mousedown event, optionally passing a map of data or trigger that event on the specified element.

We use this methods .mousedown( [eventData ,] handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript mousedown event, optionally passing a map of data.

The second signature .mousedown( ) triggers The JavaScript mousedown event on the specified element.

The third signature .mousedown( handler(eventObject) ) triggers The JavaScript mousedown event on the specified element.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the 'div' element with an id of 'div2' below is hovered over and a mouse button pressed.

When a mouse button is pressed down, The JavaScript mousedown event fires off the $('#div2').mousedown({ param1: '#scrollspan1', param2: 'mousedown', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan1', param2: 'mousedown', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.


$(function(){
  $('#div2').mousedown({ param1: '#scrollspan1', param2: 'mousedown ', 
                         param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
  }
});
div2. Click Here.

We will show a message here.

The .mouseenter() Property Top

Bind an event handler to The JavaScript mouseenter event, optionally passing a map of data or trigger that event on the specified element.

We use this methods .mouseenter( ) signature in our example below which triggers the JavaScript mouseenter event on the specified element.

The second signature .mouseenter( handler(eventObject) ) binds an event handler to The JavaScript mouseenter event.

The third signature .mouseenter( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript mouseenter event, optionally passing a map of data.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'div' element with an id of 'div5' every time the mouse enters the division. Notice how the event doesn't fire when the mouse enters the image element, as the mouseenter event only triggers its handler when the mouse pointer enters the element it is bound to, not any descendants.

When the mouse enters the division we trigger off the mouseenter JavaScript event on the 'div5'. This then fires off the $('#div5').mouseenter(function(){}) code which outputs the message.

a picture of curry


$(function(){
  $('#div5').mouseenter(function () {
    $('#div5').append('<code>mouseenter</code> JavaScript event triggered.<br>');
  });
});

The .mouseleave() Property Top

Bind an event handler to The JavaScript mouseleave event, optionally passing a map of data or trigger that event on the specified element.

The first signature .mouseleave( ) triggers The JavaScript mouseleave event on the specified element.

The second signature .mouseleave( handler(eventObject) ) binds an event handler to The JavaScript mouseleave event.

The third signature .mouseleave( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript mouseleave event, optionally passing a map of data.

Examples of these signatures are available in the reference section.

The .mousemove() Property Top

Bind an event handler to The JavaScript mousemove event, optionally passing a map of data or trigger that event on the specified element.

The first signature .mousemove( ) triggers The JavaScript mousemove event on the specified element.

The second signature .mousemove( handler(eventObject) ) binds an event handler to The JavaScript mousemove event.

The third signature .mousemove( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript mousemove event, optionally passing a map of data.

Examples of these signatures are available in the reference section.

The .mouseout() Property Top

Bind an event handler to The JavaScript mouseout event, optionally passing a map of data or trigger that event on the specified element.

We use this methods .mouseout( ) signature in our example below which triggers the JavaScript mouseout event on the specified element.

The second signature .mouseout( handler(eventObject) ) binds an event handler to The JavaScript mouseout event.

The third signature .mouseout( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript mouseout event, optionally passing a map of data.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'div' element with an id of 'div12' every time the mouse leaves the division. Notice how the event also fires when the mouse leaves the image element, as the mouseout event triggers its handler when the mouse pointer leaves the element it is bound to, as well as any descendants.

When the mouse leaves the division or image, we trigger off the mouseout JavaScript event on the 'div12'. This then fires off the $('#div12').mouseout(function(){}) code which outputs the message.

a picture of curry


$(function(){
  $('#div12').mouseout(function () {
    $('#div12').append('<code>mouseout</code> JavaScript event triggered.<br>');
  });
  $('#div12').mouseout();
});

The .mouseover() Property Top

Bind an event handler to The JavaScript mouseover event, optionally passing a map of data or trigger that event on the specified element.

The first signature .mouseover( ) triggers The JavaScript mouseover event on the specified element.

The second signature .mouseover( handler(eventObject) ) binds an event handler to The JavaScript mouseover event.

The third signature .mouseover( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript mouseover event, optionally passing a map of data.

Examples of these signatures are available in the reference section.

The .mouseup() Property Top

Bind an event handler to The JavaScript mouseup event, optionally passing a map of data or trigger that event on the specified element.

The first signature .mouseup( ) triggers The JavaScript mouseup event on the specified element.

The second signature .mouseup( handler(eventObject) ) binds an event handler to The JavaScript mouseup event.

The third signature .mouseup( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript mouseup event, optionally passing a map of data.

Examples of these signatures are available in the reference section.

The .toggle() Property Top

Bind two or more event handlers to the matched set that are executed cyclically on mouse clicks.

This method was deprecated in jQuery 1.8 and removed in jQuery 1.9 so we are just showing it for completeness.

Lesson 2 Complete

In this second lesson on event handlers we looked at the keyboard and mouse events methods available with jQuery.

Related Tutorials

jQuery Advanced - Lesson 1: Browser & Loading Events
jQuery Advanced - Lesson 3: Form Events
jQuery Advanced - Lesson 4: Event Handler Attachments
jQuery Advanced - Lesson 5: The Event Object

Reference

Methods

Attributes and Properties - .css() method
Attributes and Properties - .html() method
Events - .click() method
Events - .dblclick() method
Events - .hover() method
Events - .keyup() method
Events - .keydown() method
Events - .keypress() method
Events - .mousedown() method
Events - .mouseenter() method
Events - .mouseleave() method
Events - .mousemove() method
Events - .mouseout() method
Events - .mouseover() method
Events - .mouseup() method
Events - .toggle() method
Event Handler Attachment - .one() method
Manipulation - .append() method

Event Object Properties

Event Object - event.data property
Event Object - event.pageX property
Event Object - event.pageY property