CSE 190M Web Programming

Lecture 20: Events

Reading: Chapter 11

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. 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
• problem: events are tricky and have incompatibilities across browsers
  • reasons: fuzzy W3C event specs; IE disobeying web standards; etc.
• solution: jQuery includes many event-related features and fixes

Attaching event handlers the jQuery way

element.onevent = function;
element.event(function);

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

function playNewGame(evt) {
	// respond to the click event
}

• to use jQuery's event features, you must pass the handler using the jQuery object's event method
• handlers must be attached this way for jQuery's event features to work
• you can trigger the event manually by calling the same function with no parameters

  $("#play").click();
  

Attaching many event handlers

You often need to attach an event handler to a group of elements.

• With the DOM

  var btns = document.querySelectorAll("#game > button.control");
  for (var i = 0; i < gameButtons.length; i++) {
  	btns[i].observe("click", gameButtonClick);
  }
  
  function gameButtonClick(evt) { ... }
  

• With jQuery

  $("#game > button.control").click(gameButtonClick);
  
  function gameButtonClick(evt) { ... }
  

• Why is no loop required?

Custom DOM events

• Events can be attached to elements in a more generic way using the addEventListener DOM method.

  document.getElementById("myid").addEventListener("click", function);
  

• You can create your own event object and then trigger that event on an element.

  var evt = document.createEvent("click");
  evt.initEvent("click", true, true);
  document.getElementById("myid").dispatchEvent("click");
  

• You don't have to use "click", you can use whatever you want in your custom event. You could create a "boom" event, the meaning of which is for you to decide.

Custom jQuery events

• Generic jQuery event registration

  $("#myid").on("event", handler);
  

• Trigger an event on a jQuery object

  $("#myid").trigger("event");
  

  var evt = $.Event("event");
  // do stuff with evt to make it special
  $("#myid").trigger(evt);
  

The jQuery event object

function handler(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() {
	$("#target").mouseover(showCoords);
};

function showCoords(event) {
	$("#target").html(
		  "page   : (" + event.pageX + ", " + event.pageY + ")\n"
		+ "screen : (" + event.screenX + ", " + event.screenY + ")\n"
		+ "client : (" + event.clientX + ", " + event.clientY + ")"
	);
}

Move the mouse over me!

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() {
	$("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" value="Huey"  /> Huey</label>
	<label><input type="radio" name="ducks" value="Dewey" /> Dewey</label>
	<label><input type="radio" name="ducks" value="Louie" /> Louie</label>
</fieldset>

$(":radio").click(processDucks);
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

Page/window events

• The above can be handled on the window object.

$(window).on('contextmenu', function);

Keyboard/text events

• focus: the attention of the user's keyboard (given to one element at a time)

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, outer element, etc.

Form events

Stopping an event's browser behavior

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

$(function() {
	$("#exampleform").submit(checkData);
});

function checkData(event) {
	if ($("#city").val() == "" || $("#state").val().length != 2) {
		alert("Error, invalid city/state.");  // show error message
		event.preventDefault();
	}
}

• to abort a form submit or another event's default browser behavior, call jQuery's preventDefault() method on the event

Which element gets the event

<body>
	<div>
		<p>
			Events are <em>crazy</em>!
		</p>
	</div>
</body>

$(function() {
	$("body, div, p, em").click(hello);
});

function hello() {
	alert("You clicked on the " + $(this).attr("tag"));
}

What happens when I click on the span? Which element will get the event?

Answer: All of them!

Event bubbling

<body>
	<div>
		<p>
			Events are <em>crazy</em>!
		</p>
	</div>
</body>

• Clicking the span is actually a click on every element in this page.
• Therefore it was decided that all of the handlers should be executed.
• The events bubble from the bottom of the DOM tree to the top.
• The opposite model (top to bottom) is called capturing and is not widely used.

Bubbling example

<body>
	<div>
		<p>
			Events are <em>crazy</em>!
		</p>
	</div>
</body>

$(function() {
	$("body, div, p, em").click(hello);
});

function hello() {
	alert("You clicked on the " + this.nodeName);
}

Runnable example

Stopping an event from bubbling

Use the stopPropagation() method of the jQuery event to stop it form bubbling up.

<body>
	<div>
		<p>
			Events are <em>crazy</em>!
		</p>
	</div>
</body>

$(function() {
	$("body, div, p, em").click(hello);
});

function hello(evt) {
	alert("You clicked on the " + this.nodeName);
	evt.stopPropagation();
}

Runnable example

Multiple handlers

<body>
	<div>
		<p>
			Events are <em>crazy</em>!
		</p>
	</div>
	<p>Another paragraph!</p>
</body>

$(function() {
	$("body, div, p, em").click(hello);
	$("div > p").click(anotherHandler);
});

function hello() {
	alert("You clicked on the " + this.nodeName);
}
function anotherHandler() {
	alert("You clicked on the inner P tag");
}

What happens when the first p tag is clicked? Runnable example

Stopping an event right now

function anotherHandler(evt) {
	alert("You clicked on the inner P tag");
	evt.stopImmediatePropagation();
}

• Use stopImmediatePropagation() to prevent any further handlers from being executed.
• Handlers of the same kind on the same element are otherwise executed in the order in which they were bound.

Runnable example

stopImmediatePropogation() example

$("div a").click(function() {
   // Do something
});

$("div a").click(function(evt) {
   // Do something else
   evt.stopImmediatePropagation();
});

$("div a").click(function() {
   // THIS NEVER FIRES
});

$("div").click(function() {
   // THIS NEVER FIRES
});

• Only the first two handlers will ever run when the anchor tag is clicked.

jQuery handler return value

• jQuery does something special if you return false in your event handler
  • prevents the default browser action, eg evt.preventDefault()
  • stops the event from bubbling, eg evt.stopPropagation()

<form id="exampleform">
	...
	<button>Done</button>
</form>

$(function() {
	$("#exampleform").submit(cleanUpData);
	$("button").click(checkData);
});

function checkData() {
	if ($("#city").val() == "" || $("#state").val().length != 2) {
		alert("Error, invalid city/state.");  // show error message
		return false;
	}
}