Mouse Events

• click – when the mouse clicks on an element (touchscreen devices generate it on a tap).
• contextmenu – when the mouse right-clicks on an element.
• mouseover / mouseout – when the mouse cursor comes over / leaves an element.
• mousedown / mouseup – when the mouse button is pressed / released over an element.
• mousemove – when the mouse is moved.

Form Element Events

• submit – when the visitor submits a <form>.
• focus – when the visitor focuses on an element, e.g. on an <input>.

Keyboard Events

• keydown and keyup – when the visitor presses and then releases the button.

Document Events

• DOMContentLoaded – when the HTML is loaded and processed, DOM is fully built.

CSS Events

• transitionend – when a CSS-animation finishes.

Event Handlers

• To react on events we can assign a handler – a function that runs in case of an event.
• Handlers are a way to run JavaScript code in case of user actions.

<input value="Click me" onclick="alert('Click!')" type="button">
<input id="elem" type="button" value="Click me">
<script>
	elem.onclick = function() {
		alert('Thank you');
	};
</script>

• If you want to assign more than one handler use addEventListener and removeEventListener.