Triggers

user actions

code

Event reference

Mouse Events

• click
• contextmenu
• dblclick
• mousedown
• mouseenter
• mouseleave
• mouseout
• mouseover
• mouseup

Keyboard Events

• keydown
• keypress
• keyup

Drag Events

• drag
• dargend
• dragenter
• dragover
• dragleave
• dragstart
• drop

Focus Events

• focus
• blur

Touch Events

• touchstart
• touchmove
• touchend
• touchcancel

Event Handling

Event Handling Models

• inline (facepalm)
• traditional
• W3C

Inline Event Handling Model

  Click me

<script>
  function sayHello() {
    alert('hello');
  }
</script>
<div onclick="sayHello()">
  Click me
</div>
</div>

<script>
  function sayHelloOnce(e) {
    alert('hello');
    event.target.removeAttribute('onclick');
  }
</script>
<div onclick="sayHelloOnce()">
  Click me
</div>
</div>

"Traditional" Event Handling Model

element['on' + eventName] = eventHandler;

<div id="superID">Click me</div>
<script>
  var superDiv = document.querySelector('#superID');
  superDiv.onclick = function (e) {
    alert('click');
  }
</script>

<div id="superId">Click me</div>
<script>
  var superDiv = document.querySelector('#superID');
  superDiv.onclick = function (e) {
    alert('click');
    superDiv.onclick = null;
  }
</script>

W3C Event Handling Model

element.addEventListener(eventName, eventHandler, useCapture);
assert(typeof eventName === 'string');
assert(typeof eventHandler === 'function');
assert(typeof useCapture === 'boolean');

<div id="megaID">Click me</div>
<script>
  var megaDiv = document.querySelector('#megaID');
  function alertClick() { alert('click'); }
  megaDiv.addEventListener('click', alertClick);
</script>

<div id="megaId">Click me</div>
<script>
  var megaDiv = document.querySelector('#megaId');
  function alertClickOnce() {
    alert('click');
    megaDiv.removeEventListener('click', alertClickOnce);
  }
  megaDiv.addEventListener('click', alertClickOnce);
</script>

Event object

Event object - argument passed to event handler

<div id="prettyID">Click me</div>
<script>
  var div = document.querySelector('#prettyID');
  div.addEventListener('click', function (e) {
    // e is EventObject
    assert(typeof e === 'object');
    assert(e instanceof Event)
  });
</script>

Event Target

<div id="prettyID">Click me</div>
<script>
  var div = document.querySelector('#prettyID');
  div.addEventListener('click', function (e) {
    assert(e.target === div);
  });
</script>

Event DOM Trip

• capturing: document → e.target
• bubbling: e.target → document

explanation

Event

properties

• target
• currentTarget
• bubbles
• eventPhase
• type

Event

methods

• preventDefault
• stopPropagation

event.preventDefault

<a id="linkToGoogle" href="http://google.com">Google<a>
<script>
var linkToGoogle = document.querySelector('linkToGoogle');
linkToGoogle.addEventListener('click', function (e) {
  e.preventDefault();
  window.location.href = 'http://yandex.ru'; // Найдется всё!
});
</script>

Mouse Event

properties

• altKey
• shiftKey
• button
• clientX
• clientY
• screenX
• screenY

more

Keyboard Event

properties

• altKey
• shiftKey
• key
• keyCode

more

Drag Events

properties

• dataTransfer

more

Touch Events

properties

• touches
• targetTouches
• changedTouches

more

Event Delegation

<ul>
  <li><a href="#">Item 1</a></li> 
  <li><a href="#">Item 2</a></li> 
  <li><a href="#">Item 3</a></li> 
  <li><a href="#">Item 4</a></li> 
  
</ul>

• add eventHandler to each item
• handle dynamicly created items
• remove eventHandlers when item removed

Don't you think it sucks?

Use event delegation insted!

<ul> 
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

• listen event on parent
• all child events bubble to parent
• check e.target
• profit!