jQuery Introduction | Event Handling | Event Methods .click() .hover() .keypress() .focusin()

Tags:

Event methods

jQuery provides various methods related to JavaScript events in addition to the .on() method.
These event methods can be grouped by the element where the event occurs.

  1. Methods related to mouse events
  2. Methods related to keyboard events
  3. Methods related to form events

The methods related to mouse events provided by jQuery are as follows.

Method Description
.click() Connects JavaScript’s “click” event to an event handler, and runs the specified function when the “click” event occurs on the element.
.dblclick() Connects JavaScript’s “dblclick” event handler, and runs the specified function when the “dblclick” event occurs on the element.
.hover() Connects JavaScript’s “mouseenter” and “mouseleave” events to one event handler, and runs the specified function when those events occur on the element.
.mousedown() Connects JavaScript’s “mousedown” event handler, and runs the specified function when the “mousedown” event occurs on the element.
.mouseenter() Connects the event that occurs when the mouse enters the element to an event handler, and runs the specified function when that event occurs.
.mouseleave() Connects the event that occurs when the mouse leaves the element to an event handler, and runs the specified function when that event occurs.
.mousemove() Connects JavaScript’s “mousemove” event to an event handler, or runs the specified function when the “mousemove” event occurs on the element.
.mouseout() Connects JavaScript’s “mouseout” event to an event handler, and runs the specified function when the “mouseout” event occurs on the element.
.mouseover() Connects JavaScript’s “mouseover” event to an event handler, and runs the specified function when the “mouseover” event occurs on the element.
.mouseup() Connects JavaScript’s “mouseup” event to an event handler, and runs the specified function when the “mouseup” event occurs on the element.

.click() method and .dblclick() method

The .click() method connects JavaScript’s “click” event to an event handler, and runs the specified function when the “click” event occurs on the element.

The .dblclick() method connects JavaScript’s “dblclick” event to an event handler, and runs the specified function when the “dblclick” event occurs on the element.

The following example displays the state when a button is clicked or double-clicked.

$("button").click(function() {
  $("div").text("Clicked.");
});
$("button").dblclick(function() {
  $("div").text("Double-clicked.");
});

Run code

.hover() method

The .hover() method connects JavaScript’s “mouseenter” and “mouseleave” events to one event handler, and runs the specified function when those events occur on the element.

The following example displays the state when the mouse enters or leaves a button.

$("button").hover(function() {
  $("#text").text("The mouse entered.");
}, function(){
  $("#text").text("The mouse left.");
});

Run code

If two functions are specified, the first function runs when the “mouseenter” event occurs, and the second function runs when the “mouseleave” event occurs.

If only one function is specified, that one function runs when either the “mouseenter” event or the “mouseleave” event occurs.

Method Description
.keydown() Connects JavaScript’s “keydown” event to an event handler, and runs the specified function when the “keydown” event occurs on the element.
.keyup() Connects JavaScript’s “keyup” event to an event handler, and runs the specified function when the “keyup” event occurs on the element.
.keypress() Connects JavaScript’s “keypress” event to an event handler, or runs the specified function when the “keypress” event occurs on the element.

.keypress() method

The .keypress() method connects JavaScript’s “keypress” event to an event handler, and runs the specified function when the “keypress” event occurs on the element.

The following example counts and displays each character typed with the keyboard in an <input> element.

var i = 0;
$("input").keypress(function() {
  $("#text").text((++i) + " keypresses.");
});

Run code

Keys that do not print characters on the screen, such as Shift, Esc, and Delete (modifier and non-printing keys), trigger the “keydown” event but do not trigger the “keypress” event.

Method Description
.blur() Connects JavaScript’s “blur” event to an event handler, and triggers the “blur” event on the element.
.change() Connects JavaScript’s “change” event to an event handler, and runs the specified function when the “change” event occurs on the element.
.select() Connects JavaScript’s “select” event to an event handler, and runs the specified function when the “select” event occurs on the element.
.submit() Connects JavaScript’s “submit” event to an event handler, and runs the specified function when the “submit” event occurs on the element.
.focus() Connects JavaScript’s “focus” event to an event handler, and runs the specified function when the “focus” event occurs on the element.
.focusin() Connects the “focusin” event to an event handler, and runs the specified function when the “focusin” event occurs on the element.
.focusout() Connects the “focusout” event to an event handler, or runs the specified function when the “focusout” event occurs on the element.

.focusin() method and .focusout() method

The .focusin() method connects the “focusin” event to an event handler, and runs the specified function when the “focusin” event occurs on the element.

The .focusout() method connects the “focusout” event to an event handler, or runs the specified function when the “focusout” event occurs on the element.

$("input").focusin(function() {
  $(this).css("background-color", "yellow");
});

$("input").focusout(function() {
  $(this).css("background-color", "white");
});

Run code

The this keyword refers to the currently selected element itself.

References