Submodule 14.3: DOM events

DOM event handling

You are already familiar with events and how these can be used.

DOM gives us the ability to handle these events differently in order to be able to attach multiple actions in one event.

The way that we used to achieve this is by using the addEventListener() method.

The general syntax of this method is: element.addEventListener(event, function, useCapture)

• The event parameter is required and can be any of the events that are listed on W3Schools reference of Events page. Note that you should not use the "on" word that we used with the "traditional" method. Thus onclick becomes click.
• The function parameter is also required and specifies the function that will be executed when the event occurs.
• The useCapture is not a required parameter and it is a Boolean value with false as a default value. It specifies whether the event will be happening at the capturing ( True) or the bubbling (False) phase. These two categories will be explained later.

Let's see an example of how we can use this method.

Code:

Exercise

1. Open your editor, create a new file and save it as exersice14.3.1.html in the folder "yourNameWEB2JS".
2. Copy the code below and paste it in the new file.
3. Open the file in your browser and click the button to see the results.

As you can see, we attached 2 different actions to 1 event. 

Capturing and Bubbling

As we learned, there are two phases where the event can be executed, the Capturing and Bubbling phase.

To explain the different phases we will look at an example where we have elements inside other elements and all of them have event handlers.

Code:

Exercise

1. Open your editor, create a new file and save it as exersice14.3.1.html in the folder "yourNameWEB2JS".
2. Copy the code below and paste it in the new file.
3. Open the file in your browser and "Click me" to see the results.

Note the third parameter, useCapture which is false and thus the event takes place at the bubbling phase. 

What happens when you click at the "Click me" ? 

You first get the alert for that 3rd div, then the one of the second - red div and finally the one for the outer - green div.

Now, go ahead and change the useCapture to true on all eventListeners. Click again on the "Click me ". What do you see?

The events are occurring on the opposite order, starting from the green div, then going to the red and finally to the paragraph.

The above shows the difference between capturing and bubbling.

In the bubbling phase, the event occurs on the deepest element and then triggers on parents in nesting order, whereas on the capturing phase, it first occurs on the outermost element and then goes to the inner elements.

Keyboard Events

In addition to click and mouse events, we also have the keyboard events which can be used to perform actions when the user presses a key. On the Working With the Keyboard you can find more information about how to use them.

In order to be able to perform an action when a particular key is pressed, we need a way to determine which key has been pressed.

There are two ways to do that, the first is by defining it on our code using its Unicode value. On this table you can find the values for each key of the keyboard. Using this value we can use :

event.which == x || event.keyCode == x  on the code to define the key which will trigger the event.

The second way to do that is by using KeyboardEvent.key Values . Using that way, we will write key="ArrowRight" instead of keyCode==39 to trigger an event when the Right Arrow has been pressed.

Although the second way is more straightforward, there can be implications when using non-standard keyboards.

Here we will use the first way to see an example where we add 1 on a variable when the right arrow is pressed and subtract 1 when the left arrow is pressed.

Code:

Exercise

1. Open your editor, create a new file and save it as exersice14.3.3.html in the folder "yourNameWEB2JS".
2. Copy the code below and paste it in the new file.
3. Open the file in your browser and arrows on the keyboard.