Web Programming Step by Step, 2nd Edition

Lecture 20: More Events

Reading: 11.1

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

JavaScript events

• the click event (onclick) is just one of many events that can be handled

The keyword this

this.fieldName                  // access field
this.fieldName = value;          // modify field

this.methodName(parameters);    // call method

• all JavaScript code actually runs inside of an object
• by default, code runs in the global window object (so this === window)
  • all global variables and functions you declare become part of window
• the this keyword refers to the current object

Event handler binding

window.onload = function() {
	document.getElementById("textbox").onmouseout = booyah;
	document.getElementById("submit").onclick = booyah;       // bound to submit button here
};

function booyah() {           // booyah knows what object it was called on
	this.value = "booyah";
}

• event handlers attached unobtrusively are bound to the element
• inside the handler, that element becomes this

Fixing redundant code with this

<input id="huey"  type="radio" name="ducks" value="Huey"  /> Huey
<input id="dewey" type="radio" name="ducks" value="Dewey" /> Dewey
<input id="louie" type="radio" name="ducks" value="Louie" /> Louie

function processDucks() {
	if (document.getElementById("huey").checked) {
		alert("Huey is checked!");
	} else if (document.getElementById("dewey").checked) {
		alert("Dewey is checked!");
	} else {
		alert("Louie is checked!");
	}
	alert(this.value + " is checked!");
}

• if the same function is assigned to multiple elements, each gets its own bound copy

The event object

function name(event) {
	// an event handler function ...
}

• Event handlers can accept an optional parameter to represent the event that is occurring. Event objects have the following properties / methods:

Mouse events

Mouse event objects

The event passed to a mouse handler has these properties:

Mouse event example

<pre id="target">Move the mouse over me!</pre>

window.onload = function() {
	var target = document.getElementById("target");
	target.onmousemove = target.onmousedown = showCoords;
};

function showCoords(event) {
	document.getElementById("target").innerHTML = 
		+ "screen : (" + event.screenX + ", " + event.screenY + ")\n"
		+ "client : (" + event.clientX + ", " + event.clientY + ")\n"
		+ "button : "  + event.button;
}

Move the mouse over me!

Keyboard/text events

Key event objects

• issue: if the event you attach your listener to doesn't have the focus, you won't hear the event
  • possible solution: attach key listener to entire page body, document, an outer element, etc.

Key event example

document.getElementById("textbox").onkeydown = textKeyDown;
...
function textKeyDown(event) {
	var key = String.fromCharCode(event.keyCode);
	if (key == 's' && event.altKey) {
		alert("Save the document!");
		this.value = this.value.split("").join("-");
	}
}

• each time you push down any key, even a modifier such as Alt or Ctrl, the keydown event fires
• if you hold down the key, the keydown event fires repeatedly
• keypress event is a bit flakier and inconsistent across browsers

Some useful key codes

Page/window events

• The above can be handled on the window object

Form events

Stopping an event

• you can also return false; from your event handler to stop an event

Stopping an event, example

<form id="exampleform" action="http://foo.com/foo.php">...</form>

window.onload = function() {
	var form = document.getElementById("exampleform");
	form.onsubmit = checkData;
};

function checkData(event) {
	if (document.getElementById("state").length != 2) {
		alert("Error, invalid city/state.");  // show error message
		event.preventDefault();
		return false;              // stop form submission
	}
}

Multiple listeners to the same event

element.addEventListener("event", function);

var button = document.getElementById("mybutton");
button.addEventListener("click", func1);   // button.onclick = func1;
button.addEventListener("click", func2);   // button.onclick = func2;

• if you assign onclick twice, the second one replaces the first
• addEventListener allows multiple listeners to be called for the same event
• (note that you do not include "on" in the event name!)

Multiple window.onload listeners

window.onload = function;
window.addEventListener("load", function);

• it is considered bad form to directly assign to window.onload
• multiple .js files could be linked to the same page, and if they all need to run code when the page loads, their window.onload statements will override each other
• by calling window.addEventListener instead, all of them can run their code when the page is loaded