# Event listeners

Events are triggered all the time inside a webpage
- The browser itself already generates a number of events, for example after loading the page, when resizing the window, ...
- The user can also trigger events, for example by clicking on a link, pressing a key, scrolling with the mouse, submitting a form, ...
- A complete list of all possible events (opens new window) can be found on the Mozilla website
With event listeners we can interact (run a function) every time the event takes place
On this page we discuss a few commonly used events
- If you understand how this works you can make your own event listeners to interact with every possible event
An event listener has always two (sometimes three) parameters:
- first the <event> to watch for,
- second the callback function that will be executed when the event fires
- third and optional a boolean value to disable event bubbling (default value for bubbling is true)

<element>.addEventListener('<event>', function(e) {
  // do something when the <event> is triggered
  // 'e' is the event itself
});

// or with an arrow function
<element>.addEventListener('<event>', e => {
  // ...
});

1
2
3
4
5
6
7
8
9

# Mouse events

In this example, we use four mouse events

event	description
`click`	the mouse button is pressed and released on an element
`dblclick`	the mouse button is clicked twice on an element
`mouseenter`	the cursor comes over an element
`mouseleave`	the cursor leaves an element

# Static animation

Open es6/events/mouse_1.html and es6/events/mouse_1.js

# Dynamic animation

The "animations" in the previous example are very straightforward
Open es6/events/mouse_2.html and es6/events/mouse_2.js
- In this example, we change the layout with classes instead of inline CSS
  - show/hide will be replaced with a nice slide-up/slide-down effect
  - the rotate effect will be replaced with a 3D effect
  - All effects will take 1 second

# Window events

Problems with the previous example:
- we need the max-height for the animation, buth we have to "guess" what the value is
- the actual height of #section1 changes when we resize the page
In this example we constantly (re)calculate the real height of #section1 and set it as the max-height of the container
This can be done with the resize event listener on the window object
Open es6/events/window.html and es6/events/window.js

# Event bubbling

When an event happens on an element, it first runs the callback function of the corresponding event listener after which the event bubbles up the DOM tree
Open es6/events/bubbling.html and es6/events/bubbling.js
- Look at the DOM structure
- We set a click event on the figure, the img, the figcaption and the b tag inside the figcaption

Event bubbling

When you click on the b element, the event bubbles up the DOM tree, and (it looks as) you also have clicked on the figcaption and on the figure!
- Sometimes this may lead to unexpected behavior ...

You can stop this "bubbling" behavior by adding the stopPropagation() (opens new window) method to the event

# Prevent default action

Sometimes you want to prevent the default action from being executed, for example:
- click on a link but don't go directly to the href
- do some client-side validation before actually submitting a form
- ...
You can do so by adding the preventDefault() (opens new window) method to the event
Open es6/events/preventDefault.html and es6/events/preventDefault.js

# Dispatch (trigger) event

The dispatchEvent() (opens new window) method automatically triggers an event
Open es6/events/dispatch.html and es6/events/dispatch.js
- When the page loads, the click event on the button is automatically triggered

# Event on a NodeList

To add an event listener (listening to the same event and with the same callback function) to every element inside a NodeList, you first have to loop over the NodeList and add the event listener inside the loop
Open es6/events/nodelist.html and es6/events/nodelist.js

REMARKS: The 'this' keyword

In JavaScript the keyword this (opens new window) refers to the object it belongs to
In our event, the this keyword refers to the button that was clicked on, so e.target and this mean exactly the same

# Reuse callback functions

Sometimes multiple event listeners use the same callback function
To keep your code DRY (Don't Repeat Yourself), you can move the callback to a separate function and reuse it for multiple events
- Functions will be discussed in more detail later in this course

<element>.addEventListener('<event>', function (e) {
    // callback function
});

// is the same as
function cb(e) {
    // callback function
}

<element>.addEventListener('<event>', cb);

1
2
3
4
5
6
7
8
9
10

WARNING

Never use parentheses when referring to the callback function
- Good: <element>.addEventListener('<event>', cb);
- Wrong: <element>.addEventListener('<event>', cb());

# Exercises

Open exercises/index.html and make the exercises under the tab ES6 > Event listeners