Skip to content

Events

Most DOM events have an equivalent jQuery method. To use an event in jQuery, simply pin the event to the selected object using the method that is the name of the event, e.g:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EventListenerDemo</title>
</head>
<body>
    <button id="id-button">Click me</button>
</body>
</html>

$('button#id-button').click(function() {
    console.log('The button has been clicked.');
});

An equivalent notation may be used using the keyword on:

$('button#id-button').on('click', function() {
    console.log('The button has been clicked.');
});

The example above shows the click event. When you click the button with the id-button in the console, the text The button has been clicked..

Multiple event linking

It is possible to connect several events to one element at once:

$('button#id-button').on({
    'click': function() {
        // Code to be executed
    },
    'mouseover': function() {
        // Code to be executed
    }
});

Selected jQuery events:

  • click() - Launched when the user clicks on the item.
  • dblclick() - Launched when the user double-clicks the selected item.
  • mouseenter() - Launched when the user double-clicks the desired item.
  • mouseleave() - Launched when the mouse pointer leaves the specified item.
  • resize() - Launched when the size of the specified element is changed.
  • load() - Runs when the selected item is loaded.
  • scroll() - Launched when user scrolls through specified item.
  • submit() - Runs when the form is sent.