Animation & Events

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:

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

Animating Styles

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);
function fadeAway() {
  img
.style.opacity = img.style.opacity - .1;
}

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

var img = document.getElementsByTagName('img')[0];
img
.style.position = 'absolute';
img
.style.top = '0px';
function watchKittyFall() {
 
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);
function fadeAway() {
 
var img = document.getElementsByTagName('img')[0];
  img
.style.opacity = img.style.opacity - .1;
 
if (img.style.opacity < .5) {
    window
.clearInterval(fadeTimer);
 
}
}
var fadeTimer = window.setInterval(fadeAway, 100);

mention performance

Why we need events

Adding Event Listeners

In IE 9+ (and all other browsers):

domNode.addEventListener(eventType, eventListener, useCapture);
<button id="counter">0</button>
 
<script>
var counterButton = document.getElementById('counter');
function onButtonClick() {
    counterButton
.innerHTML = parseInt(counterButton.innerHTML) + 1;
}
counterButton
.addEventListener('click', onButtonClick, false);
</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

Event Properties

When your event listener is called, the browser passes an event object with information about the event into the function.

Each event type has different properties. For example, MouseEvent reports the clicked coordinates:

  <img id="kitten" src="http://placekitten.com/200/300">
 
<div id="info"></div>
 
<script>
var kittenImg = document.getElementById('kitten');
var infoDiv   = document.getElementById('info');
function onClick(event) {
    info
.innerHTML = 'You clicked on ' + event.clientX + ' , ' + event.clientY;
}
kittenImg
.addEventListener('click', onClick, false);
 
</script>

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="name" type="text">
 
<button id="button">Say My Name</button>
 
 
<script>
var button = document.getElementById('button');
function onClick(event) {
   
var name = document.getElementById("name").value;
    alert
("Hi, " + name);
}
button
.addEventListener('click', onClick);
 
</script>

javascript nventor example

Waiting for window "load"

When you use JS to manipulate the DOM, you should make sure the DOM exists.

You can either put JS at bottom of page, or listen to the "load" event:

<!DOCTYPE html>
<html>
 
<head>
 
<meta charset="utf-8" />
 
<title>Mouse Events</title>
 
<script>
function onLoad() {
 
// Setup the page
}
window
.addEventListener("load", onLoad);
 
</script>
 
</head>
 
<body>
 
</body>
</html>

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.