Web Programming Step by Step

Lecture 15
Events

Reading: 9.1 - 9.2

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

JavaScript events

• the click event (onclick) is just one of many events that can be handled
• problem: events are tricky and have incompatibilities across browsers
  • reasons: fuzzy W3C event specs; IE disobeying web standards; etc.
• solution: Prototype includes many event-related features and fixes

Attaching event handlers the Prototype way

element.onevent = function;
element.observe("event", function);

// call the playNewGame function when the Play button is clicked
$("play").observe("click", playNewGame);

• to use Prototype's event features, you must attach the handler using the DOM element object's observe method (added by Prototype)
• pass the event name as a string, and the function name to call
• handlers must be attached this way for Prototype's event features to work

• observe substitutes for addEventListener (not supported by IE)

Prototype alternative to window.onload

window.onload = function() {
   // ...
};
document.observe('dom:loaded', function() {
   // ...
});

// attach playNewGame click handler when page has finished loading
document.observe('dom:loaded', function () {
   $('play').observe('click', playNewGame);
});

• allows multiple scripts to run "onload" handlers when the page has finished loading

Attaching multiple event handlers with $$

// listen to clicks on all buttons with class "control" that
// are directly inside the section with ID "game"
document.observe('dom:loaded', function() {
	var gameButtons = $$("#game > button.control");
	for (var i = 0; i < gameButtons.length; i++) {
		gameButtons[i].observe("click", gameButtonClick);
	}
});

function gameButtonClick() { ... }

• you can use $$ and other DOM walking methods to unobtrusively attach event handlers to a group of related elements in your window.onload code

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:

• *   replaces non-standard srcElement and which properties
• ** replaces non-standard return false;, stopPropagation, etc.

Mouse events (9.2.2)

Mouse event objects

The event passed to a mouse handler has these properties:

• *   replaces non-standard properties pageX and pageY
• ** replaces non-standard properties button and which

Mouse event example

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

document.observe('dom:loaded', function() {
	$("target").observe("mousemove", showCoords);
});

function showCoords(event) {
	$("target").innerHTML = 
		  "pointer: (" + event.pointerX() + ", " + event.pointerY() + ")\n"
		+ "screen : (" + event.screenX + ", " + event.screenY + ")\n"
		+ "client : (" + event.clientX + ", " + event.clientY + ")";
}

Move the mouse over me!

The keyword this (8.1.3)

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

document.observe('dom:loaded', function() {
	$("textbox").observe("mouseout", booyah);   // bound to text box here
	$("submit").observe("click", 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 (rather than the window)

Fixing redundant code with this

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

function processDucks() {
	if ($("huey").checked) {
		alert("Huey is checked!");
	} else if ($("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

Problems with reading/changing styles

<button id="clickme">Click Me</button>

document.observe('dom:loaded', function() {
	$("clickme").onclick = biggerFont;
});
function biggerFont() {
	var size = parseInt($("clickme").style.fontSize);
	size += 4;
	$("clickMe").style.fontSize = size + "pt";
}

• style property lets you set any CSS style for an element
• problem: you cannot (usually) read existing styles with it

Accessing styles in Prototype (9.1.4)

function biggerFont() {
	// turn text yellow and make it bigger
	var size = parseInt($("clickme").getStyle("font-size"));
	$("clickme").style.fontSize = (size + 4) + "pt";
}

• getStyle function added to DOM object allows accessing existing styles
• addClassName, removeClassName, hasClassName manipulate CSS classes

Common bug: incorrect usage of existing styles

this.style.top = this.getStyle("top") + 100 + "px";            // bad!

• the above example computes e.g. "200px" + 100 + "px" ,
  which would evaluate to "200px100px"
• a corrected version:

this.style.top = parseInt(this.getStyle("top")) + 100 + "px";  // correct

Unobtrusive styling (8.2.3)

function okayClick() {
	this.style.color = "red";
	this.className = "highlighted";
}

.highlighted { color: red; }

• well-written JavaScript code should contain as little CSS as possible
• use JS to set CSS classes/IDs on elements
• define the styles of those classes/IDs in your CSS file

Setting CSS classes in Prototype (9.1.4)

function highlightField() {
	// turn text yellow and make it bigger
	if (!$("text").hasClassName("invalid")) {
		$("text").addClassName("highlight");
	}
}

• addClassName, removeClassName, hasClassName manipulate CSS classes
• similar to existing className DOM property, but don't have to manually split by spaces