JavaScript & jQuery Tutorials

JQ Home Right Arrow JQ Advanced Right Arrow Keyboard & Mouse Events

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.

The jQuery keyboard & mouse event methods in this suite allow us to bind event handlers to the focusin and focusout 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 or trigger that event on the specified element.
.keypress()Bind an event handler to The JavaScript keypress event or trigger that event on the specified element.
.keyup()Bind an event handler to The JavaScript keyup event 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.
.dblclick()Bind an event handler to the dblclick JavaScript event, optionally passing a map of data.
.hover()Bind 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.
.mouseenter()Bind an event handler to the mouseenter JavaScript event, optionally passing a map of data.
.mouseleave()Bind an event handler to the mouseleave JavaScript event, optionally passing a map of data.
.mousemove()Bind an event handler to the mousemove JavaScript event, optionally passing a map of data.
.mouseout()Bind an event handler to the mouseout JavaScript event, optionally passing a map of data.
.mouseover()Bind an event handler to the mouseover JavaScript event, optionally passing a map of data.
.mouseup()Bind an event handler to the mouseup JavaScript event, optionally passing a map of data.
.toggle() **REMOVED**
Bind two or more event handlers to the matched set that are executed cyclically on mouse clicks.
Keyboard & Mouse
.focusinBind an event handler to The JavaScript focusin event or trigger that event on the specified element.
.focusoutBind an event handler to The JavaScript focusout event or trigger that event on the specified element.

Keyboard Event Methods

Bind event handlers to the keydown, keypress and keyup JavaScript events or trigger that event on the specified element.

The .keydown() Method go to top of page 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( [eventData], handler(eventObject) ) binds an event handler to The JavaScript keydown event.

An example of this signature is 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 go to top of page Top

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

  • 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.

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

An example of this signature is 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 go to top of page Top

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

  • 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( [eventData], handler(eventObject) ) binds an event handler to The JavaScript keyup event.

An example of this signature is 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 go to top of page Top

Bind an event handler to The JavaScript click event 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.

An example of this signature is 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 go to top of page Top

Bind an event handler to The JavaScript dblclick event 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.

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

An example of this signature is 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 go to top of page 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, optionally passing an event handler to the hover JavaScript event for 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 go to top of page Top

Bind an event handler to The JavaScript mousedown event 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.

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

An example of this signature is 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 go to top of page Top

Bind an event handler to The JavaScript mouseenter event 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( [eventData], handler(eventObject) ) binds an event handler to The JavaScript mouseenter event.

An example of this signature is 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 described in the description above.

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 />');
  });
  $('#div5').mouseenter();
});

The .mouseleave() Property go to top of page Top

Bind an event handler to The JavaScript mouseleave event 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( [eventData], handler(eventObject) ) binds an event handler to The JavaScript mouseleave event.

Examples of both signatures are available in the reference section.

The .mousemove() Property go to top of page Top

Bind an event handler to The JavaScript mousemove event 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( [eventData], handler(eventObject) ) binds an event handler to The JavaScript mousemove event.

Examples of both signatures are available in the reference section.

The .mouseout() Property go to top of page Top

Bind an event handler to The JavaScript mouseout event 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( [eventData], handler(eventObject) ) binds an event handler to The JavaScript mouseout event.

An example of this signature is 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 described in the description above.

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 go to top of page Top

Bind an event handler to The JavaScript mouseover event 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( [eventData], handler(eventObject) ) binds an event handler to The JavaScript mouseover event.

Examples of both signatures are available in the reference section.

The .mouseup() Property go to top of page Top

Bind an event handler to The JavaScript mouseup event 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( [eventData], handler(eventObject) ) binds an event handler to The JavaScript mouseup event.

Examples of both signatures are available in the reference section.

The .toggle() Property go to top of page 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.

Keyboard & Mouse Event Methods

Bind event handlers to the focusin and focusout JavaScript events or trigger that event on the specified element.

The .focusin() Property go to top of page Top

Bind an event handler to the focusin JavaScript event, optionally passing a map of data.

We use this methods only signature .focusin( [eventData], handler(eventObject) ) in our example below. We show a new message in the 'p' element with an id of 'scrollspan10' each time the input element with an id of 'input10' gains focus.

When the element gains focus the focusin JavaScript event fires off the $('#input10').focusin({ param1: '#scrollspan10', param2: 'focusin', 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: '#scrollspan10', param2: 'focusin', 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(){
  $('#input10').focusin({ param1: '#scrollspan1', param2: 'focusin ', 
                          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 .focusout() Property go to top of page Top

Bind an event handler to the focusout JavaScript event, optionally passing a map of data.

We use this methods only signature .focusout( [eventData], handler(eventObject) ) in our example below. We show a new message in the 'p' element with an id of 'scrollspan11' each time the input element with an id of 'input11' loses focus.

When the element loses focus, the focusout JavaScript event fires off the $('#input11').focusin({ param1: '#scrollspan11', param2: 'focusout', 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: '#scrollspan11', param2: 'focusout', 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(){
  $('#input11').focusout({ param1: '#scrollspan11', param2: 'focusout ', 
                          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.

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: Loading & Browser Events
jQuery Advanced - Lesson 3: Form Events
jQuery Advanced - Lesson 4: Event Handler Attachments
jQuery Advanced - Lesson 5: The Event Object

What's Next?

In the next lesson we look at form events.

Reference

Methods

Attributes and Properties - .css() method
Attributes and Properties - .html() method
Events - .click() method
Events - .dblclick() method
Events - .focusin() method
Events - .focusout() 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



          

go to jQuery home page jQuery Home go to top of page Top