Events & Animation

Why we need events

Adding Event Listeners

In IE 9+ (and all other browsers):

domNode.addEventListener(eventType, eventListener);

<button id="counter">0</button>
  
<script>
var counterButton = document.getElementById('counter');
var onButtonClick = function() {
    counterButton.innerHTML = parseInt(counterButton.innerHTML) + 1;
};
counterButton.addEventListener('click', onButtonClick);
</script>

Event Types

The browser triggers many events. A short list:

  • mouse events (MouseEvent): mousedown, mouseup, click, dblclick, mousemove, mouseover, mousewheel, mouseout, contextmenu
  • touch events (TouchEvent): touchstart, touchmove, touchend, touchcancel
  • keyboard events (KeyboardEvent): keydown, keypress, keyup
  • form events: focus, blur, change, submit
  • window events: scroll, resize, hashchange, load, unload

Processing Form Input

A common use of events is to process form input, either by responding to button click events or input click/change events.

<input id="myname" type="text">
<button id="button">Say My Name</button>
  
<script>
  var button = document.getElementById('button');
  var onClick = function(event) {
  var myName = document.getElementById("myname").value;
    alert("Hi, " + myName);
  };
  button.addEventListener('click', onClick);
</script>

Exercise Time!

The window object

When you run JS in the browser, it gives you the window object with many useful properties and methods:

window.location.href;

window.navigator.userAgent;

window.scrollTo(10, 50);

window.alert("Hello world!");

The window object is the assumed global object on a page, so: 

window.alert("Hi!");

...is the same as:

alert("Hi");

Animation in JS

The standard way to animate in JS is to use these 2 window methods.

To call a function once after a delay:

window.setTimeout(callbackFunction, delayMilliseconds);

To call a function repeatedly, with specified interval between each call:

window.setInterval(callbackFunction, delayMilliseconds);

Commonly used to animate DOM node attributes:

var makeImageBigger = function() {
  var img = document.getElementsByTagName('img')[0];
  img.setAttribute('width', img.width+10);
};
window.setInterval(makeImageBigger, 1000);

Animating Styles - Opacity

It's also common to animate CSS styles for size, transparency, position, and color:

var img = document.getElementsByTagName('img')[0];
img.style.opacity = 1.0;
window.setInterval(fadeAway, 1000);
var fadeAway = function() {
  img.style.opacity = img.style.opacity - .1;
};

Note: opacity is 1E9+ only (plus all other browsers).

Animating Styles - Position

It's also common to animate CSS styles for size, transparency, position, and color:

var img = document.getElementsByTagName('img')[0];
img.style.position = 'absolute';
img.style.top = '0px';
var watchKittyFall = function() {
  var oldTop = parseInt(img.style.top);
  var newTop = oldTop + 10;
  img.style.top = newTop + 'px';
};
window.setInterval(watchKittyFall, 1000);

Note: you must specify (and strip) units.

Stopping an Animation

To stop at an animation at a certain point, store the timer into a variable and clear with one of these methods:

window.clearTimeout(timer);
window.clearInterval(timer);

var img = document.getElementsByTagName('img')[0];
img.style.opacity = 1.0;

var fadeAway = function() {  
  img.style.opacity = img.style.opacity - .1;
  if (img.style.opacity < .5) {
    window.clearInterval(fadeTimer);
  }
};
var fadeTimer = window.setInterval(fadeAway, 100);

Exercise Time!

JS Best Practices

  • Adopt a set of good, consistent coding conventions.
  • Use a code compression tool like UglifyJS.
  • Use libraries when appropriate, like jQuery or Zepto.

Further Study

Questions?

Return to Table of Contents