Event Handling in JavaScript

You may also access information about which mouse button is pressed through the button property.

1button.addEventListener("click", (event) => {
2  if (event.button == 0) {
3    console.log("Left button");
4  } else if (event.button == 1) {
5    console.log("Middle button");
6  } else if (event.button == 2) {
7    console.log("Right button");
8  }
9});

Knowing this information allows us to create interactive applications. For example, you could use a drawing board that creates a star whenever you click on the page using the primary button, and clicking on the star with the secondary button will remove it.

However, actually implementing this requires you to have a deeper understanding of frontend development, and it might be too advanced as your first real project. So, let's come back to this topic later.

Lastly, we need to talk about a special case, the right click. In most cases, this action will activate the context menu, but sometimes, you might want to assign a different purpose, such as removing an existing star.

To prevent the default action for the right click, you can't just use preventDefault() inside a "click" event callback. That would be telling the browser to prevent the default action for the "click" event, which doesn't really have a fixed default action at all.

Instead, you need to be more specific, and tell the browser to stop the default action for the event that will activate the context menu, which is "contextmenu".

1svg.addEventListener("contextmenu", (event) => {
2  event.preventDefault();
3});

Key events

The keyboard events work similarly.

• When a key is pressed down, the keydown event will be fired.
• When a key is released, the keyup event will be fired.
• After that, the keypress event will be fired.

The key event object contains information about which key has been pressed, which can be accessed through the key property.

1window.addEventListener("keypress", (event) => {
2  console.log("Key pressed: " + event.key);
3});

For modifier keys such as Shift, Control, Alt, and Meta (the Command key on Mac), you can check if they are pressed using shiftKey, ctrlKey, altKey, and metaKey properties.

The reason that they get their own separate properties is to allow you to create key combinations. For example,

1window.addEventListener("keydown", (event) => {
2  if (event.ctrlKey && event.key === "k") {
3    console.log("Key combination Ctrl + K detected.");
4  }
5});

This example checks if the key combination Control + K is pressed.

Form events

The form is a special case that requires our extra attention. Besides the pointer and key events, there are a few events only for the form component.

• When a form input field is in focus, a focus event will be fired.
• When the user starts typing, an input event will be fired.
• When the input element loses focus, a blur event will be fired.
• When the user clicks submit, a submit event will be fired.

Remember when we discussed event propagation, we said that most events will propagate from the child to the parent node. Well, the focus and blur are the exceptions. Because it doesn't make sense for the parent of the <input> to be in focus or lose focus.

Clipboard Events

There are also three events for the clipboard.

• copy fires when the user copies content from the element.
• cut fires when the user cuts content from the element.
• paste fires when the user pastes to the element.

These events are often used to restrict user actions. For example, if you want to prevent the user to be able to copy something from your web page, this is what you can do:

1p.addEventListener("copy", (event) => {
2  event.preventDefault();
3  event.clipboardData.setData("text/plain", "You cannot copy this content.");
4
5  alert("You cannot copy this content.");
6});

The setData() method will copy the string "You cannot copy this content." to the clipboard.

Loading events

The moment the HTML document finishes loading, a load event will be fired. This is useful when you need to schedule some initialization actions for your web page.

1window.addEventListener("load", () => {
2  alert("Page loaded.");
3});

The load event for the entire page is fired on the window, so you must attach the event listener to the global window object in order to catch this event.

External resources such as images, videos, and scripts will also fire a load event the moment they are done loading.

The load event do not propagate either, because an image finished loading does not mean its parent also just finished loading.

When you close a webpage, a beforeunload event will be fired before the web page is actually closed. It is often used to pop up an alert box to verify that the user wants to leave the page.

1window.addEventListener("beforeunload", (event) => {
2  event.preventDefault();
3});

Notice that the pop up alert is triggered by event.preventDefault(), not the alert() function, because in this case, we need to prevent the default action from happening, which is closing the webpage.

In conclusion

As a summary, here are all the events we have discussed in this lesson: