JavaScript events · JavaScript

JavaScript events

It’s all eventful

Much of what we want to do with JavaScript is wait for users to interact

That user interaction is called an “event”

Event listening

When a user interacts with your website an event is triggered
Your JS can listen to when that event happens
A function you write can be called when an event happens

Events

click, dblclick, contextmenu
mousedown, mouseup, mouseover, mouseout, mousemove
keypress, keydown, keyup
focus, blur, change, submit
animation, transition, touch, drag, browser
and many, many more…

Responding to events

jQuery’s on() function can be used to listen and respond

There’s also off() if you want to stop listening

HTML

<button id="click-me">Click me!</button>

JavaScript

$('#click-me').on('click', function () {
  alert('Hello, World!');
});

HTML

<ul>
  <li>Titanosaurus</li>
  <li>Apatosaurus</li>
  <li>Brontosaurus</li>
  <li>Brachiosaurus</li>
</ul>

CSS

.is-clicked {
  background-color: limegreen;
}

JavaScript

$('ul').on('click', 'li', function (e) {
  $(this).toggleClass('is-clicked');
});

JavaScript: Line A

This event listener is slightly different: Notice that the we select the <ul> tag. But we really want to listen for events on <li> tags.

After the 'click' event name, we add another CSS selector, in this case 'li'. This is called event delegation: it means that we’re listening for any click event on the <ul> but only when it comes from an <li> element.

The benefit of doing this is that <li> tags can be added and removed and the click will still happen.

JavaScript: Line B

There’s a special selector here—$(this)—it refers directly to the thing that was interacted with. In this case it refers to the single <li> our user clicked on.

The toggleClass() function will add a class if it’s missing or remove the class if it already exists.

HTML

<a class="stego-link" href="https://en.wikipedia.org/wiki/Stegosaurus">Go!</a>

JavaScript

var $link = $('.stego-link');

$link.on('click', function (e) {
  e.preventDefault();
  alert($(this).attr('href'));
});

JavaScript: Line C

Instead of using jQuery directly we can store the selected HTML element in variable and refer to the variable later.

JavaScript: Line D

Since the element that’s being clicked on is an <a> tag, we know that it has some default functionality. The <a> tags purpose is to direct a user to another page.

When we write JavaScript, we have complete control over everything. By using e.preventDefault() we can stop the link from doing what it normally does and instead do what we want.

HTML

<form>
  <label for="grocery-input">Shopping list</label>
  <input id="grocery-input">
  <button type="submit">Add</button>
</form>
<ul class="list"></ul>

JavaScript

var $input = $('#grocery-input');
var $list = $(".list");

$('form').on('submit', function (e) {
  var $li = $('<li>');
  e.preventDefault();
  $li.html($input.val());
  $list.append($li);
});

JavaScript: Line D

Instead of listening for the click event it makes more sense to listen for the form’s submit event. This event isn’t dependent on how the user submits the form, just that they did so.

JavaScript: Line G

The .html() function is used to replace all the HTML code inside an element.
The .val() function is used to get the information a user typed into an input field.

It’s all eventful

Event listening

Events

Responding to events

Videos & tutorials