Javascript Events

CSE 190 M (Web Programming), Spring 2007

University of Washington

Reading: Sebesta Ch. 5 sections 5.2, 5.4.2, 5.7 - 5.8.3

Except where otherwise noted, the contents of this presentation are © Copyright 2007 Marty Stepp and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.0 Strict Valid CSS!

Lecture summary

Old-style event handlers

<body>
<button id="ok" onclick="okay();">Click me</button>
...

// called when OK button is clicked
function okay() {
    var button = document.getElementById("ok");
    button.style.color = "red";
}

Event handlers using DOM

<body>
<button id="ok">Click me</button>
...

window.onload = initializeBody;   // global code

// called when page loads; sets up all event handlers
function initializeBody() {
    document.getElementById("ok").onclick = okay;
}
function okay() {
    this.style.color = "red";
}

Why is unobtrusive Javascript better?

The window.onload event

window.onload = name;

// called when page loads; sets up all event handlers
function name() {
    set up any necessary event handlers using the DOM
}

Proper event handlers

window.onload = initializeBody;

function initializeBody() {
    var name = document.getElementById("ok");
    name.event = function;
    ...
}













Mouse events



DOM objects for HTML elements have the following properties:





    myElement.onmousemove = myFunction;














Mouse event example



<div id="dare">Click me ... I dare you!</div>




function initializeBody() {
    document.getElementById("dare").onmousedown = colorIt;
}
function colorIt() {
    this.style.backgroundColor = "red";
}




Click me ... I dare you!















Multiple mouse event variation



<div id="dare">Click me ... I dare you!</div>




function initializeBody() {
    var dareDiv = document.getElementById("dare");
    dareDiv.onmousedown = colorIt;
    dareDiv.onmouseup = uncolorIt;
}
function colorIt() {
	this.style.backgroundColor = "red";
}
function uncolorIt() {
	this.style.backgroundColor = "transparent";
}




Click me ... I dare you!










Examining the mouse event



function colorIt(event) {
    this.style.backgroundColor = "red";
    this.innerHTML = "You clicked (" + event.screenX +
        ", " + event.screenY + ")");
}




Click me ... I dare you!



















Event object properties (reference)












Browser incompatibilities: events











Browser incompatibilities: properties








Click me: Which properties are supported?










One workaround for incompatibilities



function handleClick(event) {
    event = standardizeEvent(event);
    ...
}

// Repairs various browser incompatibilities.
function standardizeEvent(event) {
    var e = event || window.event;
    e.srcElement = e.srcElement || e.target;
    return e;
}
















Practice problem: Draggable map



One of the coolest features of Google Maps is the ability to drag the map to move it around.  Write a program with a draggable map of Middle Earth using Javascript mouse event handlers.  (See the background CSS properties from the end of the CSS slides.)













Event nesting





<div id="gum"><img src="gum.png" alt="gum" />
Double your pleasure, <em>double your fun</em>!</div>




function initializeBody() {
    document.getElementById("gum").ondblclick = doBorder;
}
function doBorder(event) {
    event = standardizeEvent(event);
    event.srcElement.style.border = "2px dashed blue";
}







gum
Double your pleasure, double your fun!
















----- Other events -----



Other events










Keyboard events



DOM objects for HTML elements have the following properties:























Key event object properties








Which key event properties does your browser support?












Common request: Detecting Enter key



    // in window.onload handler:
    document.getElementById("mytextbox").onkeypress = keyPress;

function keyPress(event) {
    event = standardizeEvent(event);
    if (event.keyCode == 13) {
        // key code 13 means the user pressed Enter
        do something;
    }
}




  • 


    




    

    Text box events
    


    these are supported by <input type="text">, <textarea>
    




    




    

    Practice problem: numbers only
    


    Write Javascript code so that a text input box will only accept numbers as input.  Any other characters typed will be removed from the box immediately.
    


    




    

    Problem: multiple scripts
    


    // script 1
window.onload = init1;

    


    // script 2
window.onload = init2;

    




    




    

    Using addEventListener
    


    // script 1
window.addEventListener("load", init1, false);

    


    // script 2
window.addEventListener("load", init2, false);

    




    




    

    Browser/page events