JS Concepts : Events

There are 3 ways to assign event handlers:

1. HTML attribute: onclick="...".
2. DOM property: elem.onclick = function.
3. Methods: elem.addEventListener(event, handler[, phase]) to add, removeEventListener to remove.

-

-

Types of Events

1.  Form element events:

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

2.  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.

3.Keyboard events:

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

4. Document events

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

5.  CSS events:

• transitionend – when a CSS-animation finishes.

Mouse events:

There are many other events. We’ll get into more details of particular events in next chapters.

All mouse events include the information about pressed modifier keys.

The properties are:

• shiftKey
• altKey
• ctrlKey
• metaKey (Cmd for Mac)

For instance, the button below only works on Alt+Shift+click:

 btn.onclick = function(event) {
   if (event.altKey & amp; & amp; event.shiftKey) {
     alert('Hooray!');
   }
 };