Events

Mouse events

```
click
```
```
contextmenu
```
```
mouseover / mouseout
```
```
mousedown / mouseup
```
```
mousemove
```

Form element events

```
submit
```
```
focus
```
```
blur
```

Keyboard events

```
keydown
```
keyup

Document events

```
DOMContentLoaded
```

CSS events

```
transitionstart
```

More events

https://developer.mozilla.org/en-US/docs/Web/Events

addEventListener

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
// Gecko/Mozilla only
target.addEventListener(type, listener[, useCapture, wantsUntrusted]);

HTML Events

<!-- Syntax -->
<element event="some JavaScript">
  
<!-- Example -->
<button onclick="document.getElementById('demo').innerHTML = Date()">
  The time is?
</button>

button.onclick = function() {
  document.getElementById('demo').innerHTML = Date();
}

event.target vs this

event.target – is the “target” element that initiated the event, it doesn’t change through the bubbling process.
this – is the “current” element, the one that has a currently running handler on it.

Event.preventDefault()

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

Event.stopPropagation()

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Event.stopImmediatePropagation()

The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called.