const - JS | lectureAdvanced DOM and Events

In this lecture and the next ones, we'll talk a little bit more about events. We already worked with events before, of course, but now, let's add some more important concepts and also make things a bit more clear.

An event is basically a signal generated by a certain DOM node. And a signal means that something happened. For example, a click, a moving mouse, a user triggering a full screen mode, and really anything of importance on a webpage generates an event. And as we already know, we can listen to these events in our code using event listeners, so that we can then handle them if we'd like to. But no matter if we handle an event or not, for example a click, that event will always happen when a user clicks. So it doesn't matter if we are actually listening to it or not.

Now, since the begininning of this course, we already worked with a couple of different events. But now let's take a look at another type of event, which is the mouseenter event. Let's start by selecting an element from our HTML file.

/**
 * Just create your own HTML file and select an element from there.
 */

const h1 = document.querySelector('h1');

Let's now listen to that event. We already know about the addEventListener method, but in this lecture we are going to learn two more ways of listening to events. For now, let's use the addEventListener method.

h1.addEventListener('mouseenter', function () {
  // Do something
});

The mouseenter event is a little bit like the :hover pseudo-class in CSS. That is, it fires whenever the mouse enters a certain element. Let's just add an alert to our event handler function, and then we can see what happens.

h1.addEventListener('mouseenter', function () {
  alert('You entered the h1 element! 🎉');
});

You will now notice that, as we move our mouse over the selected element (in my case the h1 element), we get an alert. You can get the list of all possible events from the MDN documentation.

Let's now take a look at another way of attaching an event listener to an element. That's by using the on event property directly on the element. So, for example, if we want to listen to the mouseenter event, there is a property on the element called onmouseenter. And we can just assign a function to it. Let's do that.

h1.onmouseenter = function () {
  alert('You entered the h1 element! 🎉');
};

For each event, there is one on event property like the one we just used. However, this way of listening to events is a bit old school. It used to be done like this in the past, but nowadays, we use the addEventListener method instead. But it's still good to know that it exists in case you come across this way of listening to events.

Now there are two reasons why addEventListener is better. The first one is that, it allows us to add multiple event handlers to the same event. However, if we try the same thing with the onmouseenter property, then the second function will overwrite the first one.

// addEventListener
h1.addEventListener('mouseenter', function () {
  alert('You entered the h1 element! 🎉');
});

h1.addEventListener('mouseenter', function () {
  alert('You entered the h1 element again! 🎉');
});

-----------------------------------------------

// onmouseenter
h1.onmouseenter = function () {
  alert('Hello! 👋');
};

// This will overwrite the previous function
h1.onmouseenter = function () {
  alert('Goodbye! 👋');
};

The second reason is that it allows us to remove event listeners in case we don't need them anymore. This is something we haven't done yet, but it's actully very simple. Let's see how that works.

First, we need to store the event handler function in a variable. Because we cannot just write the same function and expect it to work.

const alertWelcome = function (e) {
  alert('Welcome Willie Greene 👋');
};

Next, we add the event handler function to the element using the addEventListener method.

h1.addEventListener('mouseenter', alertWelcome);

Finally, after listening and handling the event, we can remove the event listener using the removeEventListener method.

const alertWelcome = function (e) {
  alert('Welcome Willie Greene 👋');

  // Remove the event listener
  h1.removeEventListener('mouseenter', alertWelcome);};

With this, you will now notice that the alert will only show up once. And that's because in the same event handler function, we remove the event listener. This is a nice pattern when you only want to listen to any event once.

The removeEventListener method does not have to be in the event handler function. It can be anywhere in our code. For example, we can remove the event listener after a certain amount of time.

const alertWelcome = function (e) {
  alert('Welcome Willie Greene 👋');
};

h1.addEventListener('mouseenter', alertWelcome);

// Remove the event listener after 2 seconds
setTimeout(() => h1.removeEventListener('mouseenter', alertWelcome), 2000);

To finish, the third way of handling events is by using an HTML attribute. This way of handling events should actually not be used. But for the sake of curiosity, let's see how it works. We can add an onmouseenter attribute to our element in the HTML file.

<h1 onclick="alert('Hello Winifred Lucas 👋')">Hello World!</h1>

This is actually pretty weird 🫤, and this is kind of old school 👴 JavaScript from the early days.

Alright! So, those are the different ways of handling events and how to remove events. In the next lecture, we'll talk about the most important property of events called bubbling.