Events & Interaction

Lonce Wyse

Communication & New Media

lonce.wyse@cnm.nus.sg

Events

Generator

Listener

Action

HTML elements generate DOM events

Button

click

Listener responds:  

function( event )

addEventListener

JavaScript:

var myButton = document.getElementById("buttonID");


var myFunction = function( ev ) {
    alert( "got a button press!");
}


myButton.addEventListener("click", myFunction);

No need to always name a function

JavaScript:

var myButton = document.getElementById("buttonID");


myButton.addEventListener("click", function( ev ) {
        alert( "got a button press!");
    }
);

<input type="xxxx">

HTML:

<input type="range" min="100" max="1000" step="50">

type="selector"

type="checkbox"

type="radio"

type="text"

type="button"

events:

click, mousedown,

keydown

change

...