DOM Object Events

Question 1

AnimationEvent

Answer 1

an event for CSS animations
types: animationstart, animationend,
animationiteration (when an animation is repeated)

properties: animationName, elapsedTime,
psuedo-element

Question 2

ClipboardEvent

Answer 2

Events that occur when the clipboard is modified

types: oncopy, oncut, onpaste
property: clipboardData

Question 3

DragEvent

Answer 3

Events that occur when elements are dragged and/or dropped. Inherits properties from MouseEvent.

types: ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop
property: dataTransfer

Question 4

FocusEvent

Answer 4

Events that occur when elements gets or loses focus. Inherits properties and methods from UiEvent.

types: onblur, onfocus
onfocusin (about to get focus)
onfocusout (about to lose focus)

Question 5

InputEvent

Answer 5

Events that occur when a form element’s content changes. Inherits from UiEvent

type: oninput
properties: data, dataTransfer, getTargetRanges(), inputType, isComposing

Question 6

TouchEvent, KeyboardEvent, MouseEvent properties:

altKey, ctrlKey, shiftKey, metaKey

Answer 6

Boolean properties that return true if each key was pressed when the event triggered

meta is command/windows key

Question 7

KeyboardEvent

Answer 7

Events that occur when user presses a key on the keyboard. Inherits from UiEvent

types: onkeydown, onkeypress, onkeyup
properties: code, charCode, key, location, repeat, which

Question 8

MouseEvent

Answer 8

Events that occur when the mouse interacts with the HTML document. Inherits from UiEvent

types: onclick, ondblclick, oncontextmenu (M2), onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmousup
properties: clientX, clientY, screenX, screenY, movementX, movementY, offsetX, offsetY, pageX, pageY

client: browser
page: document
offset: target element
screen: user’s screen
movement: relative to prior mouse event

Question 9

PageTransitionEvent

Answer 9

Events that occur when user navigates to, and away from, a webpage.

types: pagehide, pageshow
property: persisted (was the page cached by the browser)

Question 10

ProgressEvent

Answer 10

Events that occur when loading external resources, belongs to the ProgressEvent Object.

types: onerror, onloadstart

Question 11

TouchEvent

Answer 11

Events that occur when user touches a touch-based device

types: ontouchcancel, ontouchend, ontouchmove, ontouchstart
properties: touches, targettouches, changedtouches

Question 12

TransitionEvent

Answer 12

Events that occur when a CSS transition runs

type: transitionend
properties: propertyName, elapsedTime, pseudoElement

Question 13

UiEvent

Answer 13

Events that are triggered from the user interface.
Childrend of UiEvent: FocusEvent, InputEvent, KeyboardEvent, MouseEvent, TouchEvent, WheelEvent

types: abort, beforeunload, error, load, resize, scroll, select, unload

Question 14

WheelEvent

Answer 14

Events that occur when the mouse wheel is scrolling. Inherits from MouseEvent and UiEvent

type: onwheel
properties: deltaX, deltaY, deltaZ, deltaMode

Question 15

abort

Answer 15

when the loading of media is aborted

Question 16

afterprint

Answer 16

an event that occurs when a page has started printing or if the print dialogue box has been closed

Question 17

beforeprint

Answer 17

an event that occurs when a page is about to be printed

Question 18

canplay

Answer 18

an event that occurs when a media has buffered enough to being

Question 19

canplaythrough

Answer 19

The event occurs when the browser can play through the media without stopping for buffering

Question 20

change

Answer 20

The event occurs when the content of a form element, the selection, or the checked state have changed (for input, select, and textarea)

Question 21

ended

Answer 21

The event occurs when the media has reach the end (useful for messages like “thanks for listening”)

Question 22

fullscreenchange

Answer 22

The event occurs when an element is displayed in fullscreen mode

Question 23

message

Answer 23

The event occurs when a message is received through the event source

Question 24

offline / online

Answer 24

The event occurs when the browser starts to work offline / online

Question 25

pause, play, playing

Answer 25

events for when a media is paused of is no longer paused.

playing (resumed after pause)

Question 26

submit

Answer 26

The event occurs when a form is submitted

Question 27

What is Event Delegation?

Answer 27

The idea is that if we have a lot of elements handled in a similar way,
then instead of assigning a “handler” to each of them
We put a single handler on their common ancestor.

table.onclick = function(event) {
  let target = event.target; // where was the click?

if (target.tagName != ‘TD’) return; // not on TD? Then we’re not interested

highlight(target); // highlight it
};

Question 28

How can event Delegation be used on a group of save load and search buttons?

Answer 28

div
button data-action=”save”>Save< /button
button data-action=”load”>Load< /button
button data-action=”search”>Search< /button
/div

  class Menu {
    constructor(elem) {
      this._elem = elem;
      elem.onclick = this.onClick.bind(this); // (*)
    }

save() { alert('saving'); }

load() { alert('loading'); }

search() { alert('searching'); }

    onClick(event) {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    };
  }
  new Menu(menu);