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.

Links

Events

By Andrew Bogomolov

Made with Slides.com

Events

  • 61

More from Andrew Bogomolov