There are many user actions (events) that a web page can respond to using jQuery. Things such as a mouse click, key press, form submit, or scroll.

The following are some quick examples of the methods used in event interactions. A complete list of events can be found here along with more detailed descriptions of their intended use and syntax.

The click event occurs when an HTML element is clicked.

// show an alert when a div is clicked by the user
$('div').click(function() {
    alert('The element has been clicked.');
});

The dblclick event occurs when an HTML element is double-clicked.

// show an alert when a div is double clicked by the user
$('div').dblclick(function() {
    alert('The element has been clicked.');
});

The focus event occurs when an element gets focus when selected by a mouse click or by tabbing to it with the tab keyboard key.

// provide an alert when a form input is made active by the user
$('input').focus(function() {
    alert('This input field has focus.');
});

The hover() method specifies two functions to run when the mouse pointer hovers over the selected element, triggering both the mouseenter and mouseleave events.

// set background-color property on hover
$('p').hover(function() {
    $(this).css('background-color', 'red');
});

The keypress event occurs when a keyboard key is pressed down, but not for all keys (e.g. ALT, CTRL, SHIFT, ESC).

// when the user starts to type in a form field, they get an alert
$('input').keypress(function() {
    alert('A key was pressed.');
});

The on() method attaches one or more event handlers to the selected elements and child elements.

// when the user "clicks" on a div, provide an alert
$('div').on('click', function() {
    alert('The element was clicked.');
});

The submit event occurs when an HTML form is submitted.

// on form submit, an alert is provided
$('form').submit(function() {
    alert('The form has been submitted.');
});

---