The event object and preventDefault

Every handler receives the event object as its first argument: details of what happened, on which element, which key was pressed. It also has methods that cancel the browser's default action and stop the event from travelling further.

Event object properties

<input id="title" placeholder="Press a key">
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#title').on('keydown', function (event) {
    console.log(event.type, event.key);
  });
</script>

Press keys in the field: the output shows lines like keydown a and keydown Enter. The object is usually named event or just e.

jQuery wraps the browser event in its own object and copies the most needed properties into it. The rest are available through originalEvent.

Adding a task on Enter

<input id="title" placeholder="New task">
<ul id="tasks"></ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#title').on('keydown', function (event) {
    if (event.key === 'Enter') {
      $('#tasks').append($('<li>').text($(this).val()));
      $(this).val('');
    }
  });
</script>

Type a title and press Enter: the task appears in the list and the field is cleared.

preventDefault: cancel the browser action

Some events have a default action: a link opens an address, a form submits and reloads the page. preventDefault() cancels it:

<a href="/tasks/archive" id="archive">Task archive</a>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#archive').on('click', function (event) {
    event.preventDefault();
    console.log('Navigation cancelled, showing the archive on this page');
  });
</script>

Clicking the link does not leave the page; it only prints a message.

stopPropagation: stop bubbling

An event bubbles: handlers on the element itself run first, then those on its parents. stopPropagation() stops this climb:

<ul id="tasks">
  <li>Buy bread <button class="delete">Delete</button></li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#tasks').on('click', 'li', function () {
    console.log('Task clicked');
  });
 
  $('#tasks').on('click', '.delete', function (event) {
    event.stopPropagation();
    console.log('Delete');
  });
</script>

Clicking the button prints only "Delete", without "Task clicked".

return false

If a jQuery handler returns false, it is the same as calling both preventDefault() and stopPropagation(). Older code often does this, but explicit calls are clearer.

The same in plain JavaScript

The event object in addEventListener works the same way and has the same preventDefault() and stopPropagation() methods. But return false in a plain addEventListener handler cancels nothing.

Common mistake

Confusing event.target and this. With delegation $('#tasks').on('click', 'li', ...), clicking text inside a <span> gives event.target as that span, while this is the li item. To work with the item, use this or event.currentTarget.