facebook google plus twitter
Webucator's Free JavaScript Tutorial

Lesson: Event Handlers and Listeners

Welcome to our free JavaScript tutorial. This tutorial is based on Webucator's Introduction to JavaScript Training course.

In this lesson, you will learn how to work with event handlers.

Lesson Goals

  • Learn to understand what JavaScript event handlers are.
  • Learn to recognize commonly-used event handlers.
  • Learn to use dot notation and square-bracket notation.
  • Learn to get DOM elements with getElementById().
  • Learn to get DOM elements with querySelector().
  • Learn to access element and text nodes hierarchically.

On-event Handlers

On-event handlers are attributes that force an element to "listen" for a specific event to occur.

We might, for instance, listen for a user to click on a specific div element, listen for a form submission, or listen for the user to pass his or her mouse over any input element of a given class.

The table below lists commonly-used HTML on-event handlers with descriptions:

HTML On-event Handlers
On-event Handler Description
onblur The element lost the focus.
onchange The element value was changed.
onclick A pointer button was clicked.
ondblclick A pointer button was double-clicked.
onfocus The element received the focus.
onkeydown A key was pressed down.
onkeypress A key was pressed and released.
onkeyup A key was released.
onload The document has been loaded.
onmousedown A pointer button was pressed down.
onmousemove A pointer was moved within the element.
onmouseout A pointer was moved off of the element.
onmouseover A pointer was moved onto the element.
onmouseup A pointer button was released over the element.
onreset The form was reset.
onselect Some text was selected.
onsubmit The form was submitted.

The getElementById() Method

A very common way to reference HTML elements is by their id using the getElementById() method of the document object as shown in the example below. Once we have the element - that is, once we get a given div, p, input or other DOM element via the getElementById() method - we can then listen for events on that element. Let's look at an example:

Code Sample:

EventHandlers/Demos/get-element-by-id.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="../styles.css">
<script>
function changeBg(id, color) {
  document.getElementById(id).style.backgroundColor = color;
}
</script>
<title>getElementById()</title>
</head>
<body>
<main>
  <button onclick="changeBg('divRed','red')">Red</button>
  <button onclick="changeBg('divOrange','orange')">Orange</button>
  <button onclick="changeBg('divGreen','green')">Green</button>
  <button onclick="changeBg('divBlue','blue')">Blue</button>
  <div id="divRed">Red</div>
  <div id="divOrange">Orange</div>
  <div id="divGreen">Green</div>
  <div id="divBlue">Blue</div>
</main>
</body>
</html>

Code Explanation

Clicking the buttons sets the style of the corresponding div element, whose id is gotten via a call to getElementById() in the changeBg() function.

Using On-event Handlers

Duration: 15 to 25 minutes.

In this exercise, you will use some of the on-event handlers from the table above to allow the user to change the background color of the page.

  1. Open EventHandlers/Exercises/color-changer.html for editing.
  2. Modify the page so that...
    • When the "Red" button is clicked, the background color turns red.
    • When the "Green" button is double-clicked, the background color turns green.
    • When the "Orange" button is clicked down, the background color turns orange and when the button is released (onmouseup), the background color turns white.
    • When the mouse hovers over the "pink" link, the background color turns pink. When it hovers off, the background color turns white.

Code Sample:

EventHandlers/Exercises/color-changer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="../styles.css">
<title>Color Changer</title>
</head>
<body>
<main>
  <button>
    Click to turn the page red.
  </button>
  <button>
    Double-click to turn the page green.
  </button>
  <button>
    Click and hold to turn the page orange.
  </button>
  <a href="#">Hover over to turn page pink.</a>
</main>
</body>
</html>

Code Explanation

Challenge

  1. Add functionality so that when the user presses any key, the background color turns white.

Solution:

EventHandlers/Solutions/color-changer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="../styles.css">
<script>
function changeBg(color) {
  document.body.style.backgroundColor = color;
}
</script>
<title>Color Changer</title>
</head>
<body>
<main>
  <button onclick="changeBg('red')">
    Click to turn the page red.
  </button>
  <button ondblclick="changeBg('green')">
    Double-click to turn the page green.
  </button>
  <button onmousedown="changeBg('orange')"
    onmouseup="changeBg('white')">
    Click and hold to turn the page orange.
  </button>
  <a href="#"
    onmouseover="changeBg('pink')"
    onmouseout="changeBg('white')">Hover over to turn page pink.</a>
</main>
</body>
</html>

Code Explanation

Challenge Solution:

EventHandlers/Solutions/color-changer-challenge.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="../styles.css">
<script>
function changeBg(color) {
  document.body.style.backgroundColor = color;
}
</script>
<title>Color Changer</title>
</head>
<body onkeypress="changeBg('white')">
<main>
  <button onclick="changeBg('red')">
    Click to turn the page red.
  </button>
  <button ondblclick="changeBg('green')">
    Double-click to turn the page green.
  </button>
  <button onmousedown="changeBg('orange')"
    onmouseup="changeBg('white')">
    Click and hold to turn the page orange.
  </button>
  <a href="#" onmouseover="changeBg('pink')"
    onmouseout="changeBg('white')">Hover over to turn page pink.</a>
</main>
</body>
</html>

Code Explanation

The addEventListener() Method

You have learned how to add event handlers using the on-event HTML attributes (e.g., onload, onclick, etc). Now you will learn how to add event listeners using an EventTarget's addEventListener() method.

An EventListener represents an object that does something when an event occurs. Think of a swimmer on a block, waiting for the starting gun to go off. When the gun goes off, the swimmer dives. Here is some pseudo-code to set that up in JavaScript:

diver.addEventListener('shotFire', dive);

In the pseudo-code above, diver is the EventTarget, shotFire is the event type, and dive is the function that will be called when the event occurs. Functions that are called in response to an event are known as callback functions.

An EventTarget is any object on which an event can occur, including window, document, and any HTML element. The basic syntax is as follows:

Syntax

object.addEventListener(eventType, callbackFunction);

We have already seen the different types of events: click, dblclick, load, mouseover, mouseout, etc. HTML attributes used to call these events all begin with "on", but when referencing the event type directly, you do not include the "on" prefix. For example, the code below shows how to call the init() function when the load event of the window object occurs:

Code Sample:

EventHandlers/Demos/window-load.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="../styles.css">
<script>
  function init(e) {
    alert('Hello, world!');
  }
  window.addEventListener('load', init);
</script>
<title>window load</title>
</head>
<body>
<main>
  <p>Nothing to show here.</p>
</main>
</body>
</html>

Code Explanation

Run this in the browser and you will see the "Hello, world!" alert as soon as the page is finished loading.

Notice in the code above that init is passed to addEventListener() without the usual trailing parentheses associated with functions. It is window.addEventListener('load', init); and not window.addEventListener('load', init() ); The reason is that we are not calling the function at this point in the code. Rather, we are indicating that we want the function to be called when the relevant event occurs. If you make the mistake of including the parentheses, the function will be called immediately and the value returned from the function will be used as the callback function, probably resulting in an error.

The table below lists common event types with descriptions. These correspond to the on-event handlers we saw earlier.

Event Types
Event Type Description
blur The element lost the focus.
change The element value was changed.
click A pointer button was clicked.
dblclick A pointer button was double-clicked.
focus The element received the focus.
keydown A key was pressed down.
keypress A key was pressed and released.
keyup A key was released.
load The document has been loaded.
mousedown A pointer button was pressed down.
mousemove A pointer was moved within the element.
mouseout A pointer was moved off of the element.
mouseover A pointer was moved onto the element.
mouseup A pointer button was released over the element.
reset The form was reset.
select Some text was selected.
submit The form was submitted.

The callback Function

In the example above, the callback function is init(e). You may have noticed that it takes a single parameter, which we have called e, but the variable name is arbitrary. Common names are e and evt. This parameter will hold the event that caused the callback function to be called. Examine the following:

Code Sample:

EventHandlers/Demos/window-load-e.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="../styles.css">
<script>
  function init(e) {
    alert(e);
    alert(e.currentTarget);
    alert(e.type);
  }
  window.addEventListener('load', init);
</script>
<title>window load</title>
</head>
<body>
<main>
  <p>Nothing to show here.</p>
</main>
</body>
</html>

Code Explanation

This time, instead of alerting "Hello, world!", the code alerts e: [object Event] and then alerts the currentTarget property of the event, which is the object that caused the event to occur: [object Window]. Finally, it alerts the type of event: load.

Now let's take a look at how we use this passing of the event to make a function's response dependent on the event that spawned it:

Code Sample:

EventHandlers/Demos/current-target.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="../styles.css">
<script>
  function changeBg(e) {
    var color = e.currentTarget.id;
    document.body.style.backgroundColor = color;
  }

  function init(e) {
    var aqua = document.getElementById('aqua');
    var lime = document.getElementById('lime');
    var pink = document.getElementById('pink');
    aqua.addEventListener('click', changeBg);
    lime.addEventListener('click', changeBg);
    pink.addEventListener('click', changeBg);
  }
  window.addEventListener('load', init);
</script>
<title>window load</title>
</head>
<body>
<main>
  <button id="aqua">Aqua</button>
  <button id="lime">Lime</button>
  <button id="pink">Pink</button>
</main>
</body>
</html>

Code Explanation

Run this page in your browser to see how it works.

  1. When the page is loaded the init() function is called. It adds event listeners to each of the buttons, all with the same callback function: changeBg. Note that we have to add these event listeners after the document loads to be sure that the buttons exist. That is why we do it in the callback function of window's load event.
  2. The callback function, changeBg(), sets the color variable to the value of the id of the event's currentTarget - the button that was clicked. It then changes the background color to color.

Anonymous Functions

The init() function in the sample above is meant to be called once and only once - when the page finishes loading. As such, there is no reason for it to remain available after it is run. Such functions are often created as anonymous functions at the point in the code that they are needed. The syntax is as follows:

Syntax

object.addEventListener(eventType, function(e) {
	// function code here
});

Notice the function has no name: function init(e) is replaced with function(e). It doesn't need a name, because it will only be referenced this one time in the code.

Here is the last page rewritten to use an anonymous function:

Code Sample:

EventHandlers/Demos/anonymous-function.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="../styles.css">
<script>
  function changeBg(e) {
    var color = e.currentTarget.id;
    document.body.style.backgroundColor = color;
  }

  window.addEventListener('load', function(e) {
    var aqua = document.getElementById('aqua');
    var lime = document.getElementById('lime');
    var pink = document.getElementById('pink');
    aqua.addEventListener('click', changeBg);
    lime.addEventListener('click', changeBg);
    pink.addEventListener('click', changeBg);
  });
</script>
<title>Anonymous Function</title>
</head>
<body>
<main>
  <button id="aqua">Aqua</button>
  <button id="lime">Lime</button>
  <button id="pink">Pink</button>
</main>
</body>
</html>

Code Explanation

Run this page in your browser and you'll see that it works the same as it did with a named function.

Note that we could make changeBg() an anonymous function as well, but because it is called three times, we would have to change it each place it is called. If we ever wanted to change it, we would have to change it in all three places. So, as it is reused, it makes more sense to give that one a name.

Capturing Key Events

The three types of keyboard events are:

  1. keydown - fires when a key is pressed down.
  2. keyup - fires when a key is released.
  3. keypress - fires when a key is pressed down and then released.

The target of keyboard events can be the document or any element on the page.

When capturing a keyboard event, it is common to want to know what key is pressed. This is available via the event's key property.

Code Sample:

EventHandlers/Demos/keys.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="../styles.css">
<script>
  document.addEventListener('keypress', function(e) {
    document.getElementById('keyholder').innerHTML = e.key;
  });
</script>
<title>Key Press</title>
</head>
<body>
<main id="keyholder"></main>
</body>
</html>

Code Explanation

Run this page in your browser and press any key to see how it works. Notice that when you press the Enter key, the word "Enter" is output. You could use the code below to capture this on an input field:

var myInput = document.getElementById('myInput'); myInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { doSomething(); } });

This demo uses the innerHTML property, which you can use to read and modify the HTML content of an element.

Benefits of Event Listeners

Using on-event handlers such as onclick and onmouseover is simple and straightforward, while using event listeners requires more JavaScript to set things up, so why use event listeners?

There are at least two major benefits to using event listeners:

  1. You can add multiple event listeners to the same element.
  2. Your HTML and JavaScript code are decoupled, which provides for easier maintenance and debugging.

To illustrate, take a look at the following JavaScript file:

Code Sample:

EventHandlers/Demos/benefits.js
function color() {
  document.body.style.backgroundColor = 'red';
}

function reset() {
  document.body.style.backgroundColor = 'white';
}

function log(e) {
  var t = e.currentTarget;
  console.log(t.id + ' clicked');
}

window.addEventListener('load', function() {
  var btnColor = document.getElementById('btn-color');
  btnColor.addEventListener('click', color);
  btnColor.addEventListener('click', log);

  var btnReset = document.getElementById('btn-reset');
  btnReset.addEventListener('click', reset);
  btnReset.addEventListener('click', log);
});

Code Explanation

Notice that you don't need to see the HTML to understand how this code will work and when it will run.

  1. The color() and reset() functions just change the background color of the page.
  2. The log(e) function logs the button click. Here we just log it to the console, but in practice, we could log it to a permanent location using Ajax, which we do not cover in this course.
  3. Each button gets two event listeners: one to change the color and the other to log the event. We couldn't do this with an onclick tag without rewriting our JavaScript to combine the logging with the color-changing functions.

To see how it works, open EventHandlers/Demos/event-listeners-benefits.html in Google Chrome with the console open and click on the buttons several times.

Adding Event Listeners

Duration: 15 to 25 minutes.

You will start with the code below:

Code Sample:

EventHandlers/Exercises/add-event-listener.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="../styles.css">
<script>
  // write changeBg function here
  
  function changeBgWhite(e) {
    document.body.style.backgroundColor = 'white';
  }

  // add your event listener here
</script>
<title>Color Changer</title>
</head>
<body>
<main>
  <button id="red">
    Click to turn the page red.
  </button>
  <button id="green">
    Double-click to turn the page green.
  </button>
  <button id="orange">
    Click and hold to turn the page orange.
  </button>
  <a href="#" id="pink">Hover over to turn page pink.</a>
</main>
</body>
</html>

Code Explanation

  1. Open EventHandlers/Exercises/add-event-listener.html in your editor.
  2. Add an event listener to capture the load event of the window object. The callback function should be anonymous and should do the following:
    1. Create variables holding the buttons and link.
    2. Add a click event to the red button that calls changeBg.
    3. Add a dblclick event to the green button that calls changeBg.
    4. Add a mousedown event to the orange button that calls changeBg.
    5. Add a mouseup event to the orange button that calls changeBgWhite.
    6. Add a mouseover event to the link that calls changeBg.
    7. Add a mouseout event to the link that calls changeBgWhite.
    8. Add a keypress event to the document object that calls changeBgWhite.
  3. Write the changeBg() function.

Challenge

  1. Change the changeBgWhite() function as follows:
    function changeBgWhite(e) { changeBg('white'); }
  2. Change the changeBg() function to allow for a color value as a string as well as an event. If an event is passed in, it should get the color from the id of the currentTarget of the event as it does now. But if a string is passed in, it should use that string as the color value.

Solution:

EventHandlers/Solutions/add-event-listener.html
---- C O D E   O M I T T E D ----
<script>
  function changeBg(e) {
    var color = e.currentTarget.id;
    document.body.style.backgroundColor = color;
  }
  
  function changeBgWhite(e) {
    document.body.style.backgroundColor = 'white';
  }

  window.addEventListener('load', function() {
    var btnRed = document.getElementById('red');
    var btnGreen = document.getElementById('green');
    var btnOrange = document.getElementById('orange');
    var lnkPink = document.getElementById('pink');

    btnRed.addEventListener('click', changeBg);
    btnGreen.addEventListener('dblclick', changeBg);
    btnOrange.addEventListener('mousedown', changeBg);
    btnOrange.addEventListener('mouseup', changeBgWhite);
    lnkPink.addEventListener('mouseover', changeBg);
    lnkPink.addEventListener('mouseout', changeBgWhite);

    document.addEventListener('keypress', changeBgWhite);
  });
</script>
---- C O D E   O M I T T E D ----

Code Explanation

We need a changeBgWhite() function because we cannot key off the id value to change the background color to white for two reasons:

  1. We have added two event handlers to the btnOrange button: mousedown and mouseup. For mouseDown, we call changeBg(), which keys off btnOrange's id attribute ("orange") to change the background color to orange. For mouseup though, we want to change the background color to white, so we cannot call changeBg() again as that sets the color to the button's id value. That's why we need changeBgWhite(). The same logic applies to the lnkPink link.
  2. The document object doesn't have an id value, so for keypress events, if we call changeBg(), the e.currentTarget.id value would be null. That's why we call changeBgWhite() instead.

Challenge Solution:

EventHandlers/Solutions/add-event-listener-challenge.html
---- C O D E   O M I T T E D ----
<script>
  function changeBg(colorOrEvent) {
    var color = 'white'; // default
    if ( typeof colorOrEvent === 'string' ) {
      color = colorOrEvent;
    } else {
      color = colorOrEvent.currentTarget.id;
    }
    document.body.style.backgroundColor = color;
  }
  
  function changeBgWhite(e) {
    changeBg('white');
  }
---- C O D E   O M I T T E D ----

Timers

Timers are started and stopped with the following four methods of the windows object:

  1. setTimeout(function, waitTime) - waitTime is in milliseconds.
  2. clearTimeout(timer)
  3. setInterval(function, intervalTime) - intervalTime is in milliseconds.
  4. clearInterval(interval)

Let's take a look at how setTimeout() and clearTimeout() work first:

Code Sample:

EventHandlers/Demos/timer.html
---- C O D E   O M I T T E D ----
<script>
  // Create global timer variable
  var timer;

  function changeBg(e) {
    var color = e.currentTarget.id;
    timer = setTimeout(function() {
      document.body.style.backgroundColor=color;
    }, 1000);
  }
  
  function stopTimer() {
    clearTimeout(timer);
    alert('Timer cleared!');
  }

  window.addEventListener('load', function() {
    btnRed = document.getElementById('red');
    btnWhite = document.getElementById('white');
    btnStop = document.getElementById('stop');

    btnRed.addEventListener('click', changeBg);
    btnWhite.addEventListener('click', changeBg);
    btnStop.addEventListener('click', stopTimer);
  });
</script>
<title>Timer</title>
</head>
<body>
<main>
  <button id="red">Change Background to Red</button>
  <button id="white">Change Background to White</button>
  <button id="stop">Wait! Don't do it!</button>
</main>
</body>
</html>

Code Explanation

Things to notice:

  1. We make timer a global variable so that we can access the timer object from within multiple functions.
  2. In the changeBg() function, we create the timer using setTimeout(). The first argument of setTimeout() is the function to execute and the second argument is the number of milliseconds to wait before executing it.
  3. The stopTimer() function simply clears the timer timer using clearTimeout().

The setInterval() and clearInterval() methods work the same way. The only difference is that the code gets executed repeatedly until the interval is cleared.

Code Sample:

EventHandlers/Demos/interval.html
---- C O D E   O M I T T E D ----
<script>
  // Create global interval and color variables
  var interval;
  var color = 'white';

  function startTogglingBg() {
    interval = setInterval(function() {
      if (color === 'white') {
        color = 'red';
      } else {
        color = 'white';
      }
      document.body.style.backgroundColor=color;
    }, 500);
  }
  
  function stopTogglingBg() {
    clearInterval(interval);
  }

  window.addEventListener('load', function() {
    btnStart = document.getElementById('start');
    btnStop = document.getElementById('stop');

    btnStart.addEventListener('click', startTogglingBg);
    btnStop.addEventListener('click', stopTogglingBg);
  });
</script>
<title>Timer</title>
</head>
<body>
<main>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
</main>
</body>
</html>

Code Explanation

Open EventHandlers/Demos/interval.html in your browser to see how it works.

Typing Test

Duration: 10 to 20 minutes.

In this exercise, you will create a simple typing test.

innerHTML

This exercise uses the innerHTML property, which you can use to read and modify the HTML content of an element.

Here is the starting code:

Code Sample:

EventHandlers/Exercises/typing-test.html
---- C O D E   O M I T T E D ----
<script>
  // Global variable containing time passed
  var timePassed = 0;

  function checkSentence(sentence, entry) {
    var msg = document.getElementById('message');
    if (sentence === entry) {
      msg.innerHTML = 'You finished in ' + timePassed + ' seconds';
      return true;
    }
    timePassed += .1;
    timePassed = parseFloat(timePassed.toFixed(1));
    msg.innerHTML = timePassed + ' seconds';
    return false;
  }

  window.addEventListener('load', function() {
    var sentence = document.getElementById('sentence').innerHTML;
    var entryField = document.getElementById('entry');

    // Write your code here.
  });
</script>
<title>Typing Test</title>
</head>
<body id="typing-test">
<main>
  <div id="container">
    <p id="sentence">The quick brown fox jumps over the lazy dog.</p>
    <input id="entry" placeholder="Click to start timer.">
    <p id="message">0 seconds</p>
  </div>
</main>
</body>
</html>

Code Explanation

  1. Open EventHandlers/Exercises/typing-test.html in your editor.
  2. Beneath the line where entryField is declared, add an event listener to entryField, so that when the user focuses on the field, an interval is created. The interval's function should run every 100 milliseconds and should do the following:
    1. Call checkSentence(), passing in the sentence and the value of entryField and assigning the result to a variable.
    2. If checkSentence() returns true, clear the interval.
  3. Test your solution in a browser.

Solution:

EventHandlers/Solutions/typing-test.html
---- C O D E   O M I T T E D ----

<script>
  // Global variable containing time passed
  var timePassed = 0;

  function checkSentence(sentence, entry) {
    var msg = document.getElementById('message');
    if (sentence === entry) {
      msg.innerHTML = 'You finished in ' + timePassed + ' seconds';
      return true;
    }
    timePassed += .1;
    timePassed = parseFloat(timePassed.toFixed(1));
    msg.innerHTML = timePassed + ' seconds';
    return false;
  }

  window.addEventListener('load', function() {
    var sentence = document.getElementById('sentence').innerHTML;
    var entryField = document.getElementById('entry');

    entryField.addEventListener('focus', function() {
      var interval = setInterval(function() {
        var result = checkSentence(sentence, entryField.value);
        if (result) {
          clearInterval(interval);
        }
      }, 100);
    });
  });
</script>
---- C O D E   O M I T T E D ----