Events: on and off

An event is a browser signal that something happened: a click, typing, a form submission. A function that reacts to an event is called a handler. In jQuery a handler is attached with on().

A click handler

<button id="add">Add</button>
<p id="counter">Tasks: 0</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  let count = 0;
 
  $('#add').on('click', function () {
    count++;
    $('#counter').text('Tasks: ' + count);
  });
</script>

Click the button a few times: the number in the paragraph grows. In the project this code lives in script.js inside $(function () { ... }).

Several elements and this

If the set has several elements, the handler is attached to each. Inside the function this is the element the event fired on:

<style>
  .done { text-decoration: line-through; color: gray; }
</style>
 
<ul>
  <li>Buy bread</li>
  <li>Call Oleg</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('li').on('click', function () {
    $(this).toggleClass('done');
  });
</script>

A click crosses an item out, another click clears the mark.

Common events

One function can handle several events separated by spaces: on('mouseenter mouseleave', fn).

Removing a handler

off() removes handlers. To remove a specific function, keep it in a variable:

<button id="add">Add</button>
<button id="lock">Lock</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  function addTask() {
    console.log('Task added');
  }
 
  $('#add').on('click', addTask);
 
  $('#lock').on('click', function () {
    $('#add').off('click', addTask);
    console.log('Adding is disabled');
  });
</script>

After pressing "Lock", the "Add" button prints nothing. Calling off('click') without a function would remove all click handlers.

Only once: one

one() attaches a handler that removes itself after the first run:

<button id="welcome">Show a hint</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#welcome').one('click', function () {
    console.log('Click a task to mark it as done');
  });
</script>

The same in plain JavaScript

on() corresponds to addEventListener(), off() to removeEventListener(), one() to addEventListener() with the once: true option.

Common mistake

Writing .click(fn), .submit(fn) and similar shorthand methods. They appear in older code but have been deprecated since jQuery 3.3. In new code use on('click', fn): this form also supports delegation from the next lesson.