Summary of “Events in JavaScript”, part 1

Events are actions that users take on the page (button clicks or key presses).

Adding Event Handlers

button.addEventListener('click', function () {
  // Instructions
});

In the example:

• A button is an element where we want to “listen” for an event.
• addEventListener() is a function that is used to add an event handler to the element.
• 'click' is the commonly accepted name for an event and the first parameter of the addEventListener function. You can review the list of names for all events here.
• The second parameter of addEventListener is the handler function. All of the instructions that are executed are written to it only when an event occurs.

Please note that we are passing the function. We are not calling it. If we call a function, the code from this function is executed immediately, and it will not be triggered again. But what we need is for the code to be executed asynchronously, meaning only at the time when the event occurs.

// This is the wrong way of adding a handler.

button.addEventListener('click', function () {
  console.log('Button click');
}());
// The message is output to the console immediately.


// The following is the correct code.

button.addEventListener('click', function () {
  console.log('Button click');
});
// The message is output when a click event is triggered.

In the example above, we pass a function that does not have its own name to the function handler. It is not written to a variable. We created it in the place where we passed it to. These functions that are created at the moment that they are passed and do not have a name are called anonymous functions.

The event Object

The event object is a parameter of the handler function. It is always passed by the browser to this function at the time the event occurs. This object contains many useful properties and methods.

In order to use the event, all that we need to do is specify this object using the parameter of the handler function and write instructions. JavaScript will do the rest. It has become a standard practice among some developers to refer to this parameter using its abbreviation (evt) in order to avoid any errors.

Default Actions

Certain page elements have default actions. For example, when you click on the submit button of a form, the data entered in this form will be sent to the server, and when you click on a link, the browser goes to that link.

The event object contains a method that cancels the action of the element by default: preventDefault().

link.addEventListener('click', function(evt) {
  // We cancel the action by default.
  evt.preventDefault();

  // We add instructions for the click action.
  console.log('A click occurred');
});

Keyboard Events

The “keystroke” event has a special name: 'keydown'. This event is triggered when the user presses any key. It is important to note that you can only listen for this event using elements that are in focus: input fields, buttons, and elements with the tabindex and document attributes. When you press the button, the focus should shift to the corresponding element.

If we want to catch the keypress for a particular key, we can refer to the keyCode property of the event object. The property contains the code of the pressed key. For example, Enter has the code 13, whereas ESC has the code 27. These numbers are universal and the same for any layout. You can find the code for any key here.

document.addEventListener('keydown', function(evt) {
  // We check that the key code is 27
  if (evt.keyCode === 27) {
    // The code here is only executed when the user presses ESC
  }
});

There are other properties besides keyCode for determining the pressed key. For example, key and code. They return the names of the keys, not their numbers. These properties are not yet supported in all browsers, but when they are implemented more widely, you should start using them instead of the keyCode in accordance with the modern JavaScript standard.