jQuery Mouse, Keyboard and Form Events

In this chapter we see the events which you will use most: mouse, keyboard and form events. Each example is run, and the output is real.

Mouse events

<div id="box">Box</div>

var log = [];
$('#box')
  .on('click', function () { log.push('click'); })
  .on('dblclick', function () { log.push('dblclick'); })
  .on('mouseenter', function () { log.push('mouseenter'); })
  .on('mouseleave', function () { log.push('mouseleave'); });

$('#box').trigger('mouseenter').trigger('click').trigger('mouseleave');
console.log(log.join(', '));

• mouseenter and mouseleave work only for the element itself. mouseover and mouseout also fire when you move over the children.
• The method .hover(inHandler, outHandler) is a short way for mouseenter and mouseleave.

Keyboard events

<input id="search" type="text">
<p id="out"></p>

$('#search').on('keyup', function (e) {
  $('#out').text('Key: ' + e.key + ', text: ' + $(this).val());
});

$('#search').val('jQ');
var ev = $.Event('keyup', { key: 'Q' });
$('#search').trigger(ev);
console.log($('#out').text());

The event object has the key in e.key (like “a”, “Enter” or “ArrowUp”). The old properties keyCode and which are deprecated, so prefer e.key.

Form events

<form id="form">
  <input type="text" id="user" value="">
  <select id="city"><option value="d">Delhi</option><option value="m">Mumbai</option></select>
  <input type="checkbox" id="agree">
  <button type="submit">Send</button>
</form>
<p id="status"></p>

$('#city').on('change', function () {
  $('#status').text('City: ' + $(this).find('option:selected').text());
});
$('#city').val('m').trigger('change');
console.log($('#status').text());

$('#agree').on('change', function () {
  console.log('Checked: ' + this.checked);
});
$('#agree').prop('checked', true).trigger('change');

$('#form').on('submit', function (e) {
  e.preventDefault();
  console.log('Form submitted, user = "' + $('#user').val() + '"');
});
$('#form').trigger('submit');

• change fires when the value of a field is changed and the user leaves it (or at once for select and checkbox).
• input fires on every change while typing.
• submit works on the form element. Use e.preventDefault() to stop the normal sending, for example when you use Ajax.

Focus and blur

<input id="email" type="text">

$('#email').on('focus', function () { $(this).addClass('active'); });
$('#email').on('blur', function () { $(this).removeClass('active'); });

$('#email').trigger('focus');
console.log($('#email').hasClass('active'));
$('#email').trigger('blur');
console.log($('#email').hasClass('active'));

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.