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>
var counterButton = document.getElementById('counter');
var onButtonClick = function() {
    counterButton.innerHTML = parseInt(counterButton.innerHTML) + 1;
counterButton.addEventListener('click', onButtonClick);

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>
  var button = document.getElementById('button');
  var onClick = function(event) {
  var myName = document.getElementById("myname").value;
    alert("Hi, " + myName);
  button.addEventListener('click', onClick);

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.scrollTo(10, 50);

window.alert("Hello world!");

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

window.alert("Hi!"); the same as:


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]; = 1.0;
window.setInterval(fadeAway, 1000);
var fadeAway = function() { = - .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]; = 'absolute'; = '0px';
var watchKittyFall = function() {
  var oldTop = parseInt(;
  var newTop = oldTop + 10; = 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:

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

var fadeAway = function() { = - .1;
  if ( < .5) {
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


Return to Table of Contents