Attaching Events

Contact Us or call 1-877-932-8228
Attaching Events

Attaching Events

It is possible to attach all sorts of events, such as clicks, mouseovers, mouseouts, etc., to elements in the DOM. The simplest, standard cross-browser method for adding events is to assign an event handler property to a node. The syntax is shown below:

node.onevent = DoSomething;

However, there is a better way to go about this. In ClassFiles/lib.js, there is a cross-browser observeEvent() function shown below:

/*
	Function Name: observeEvent
	Arguments: target, eventName, observerFunction, useCapture
	Action: cross browser: attaches eventName to passed in target. observerFunction will be the event's callback function.
*/
function observeEvent(target, eventName, observerFunction, useCapture){
	if (target.addEventListener) {
		target.addEventListener(eventName, observerFunction, useCapture);
	} else if (target.attachEvent) {
		target.attachEvent("on" + eventName, observerFunction);
	}
}

The addEventListener() node method is part of the DOM specification. It is supported by most modern browsers, but not by older versions of Internet Explorer. In IE8 and earlier, you must use IE's proprietary attachEvent() method, which essentially works the same way. The only difference is that in IE, the attachEvent() method will repeatedly attach the same event to an event handler when called multiple times using the same parameters. Our observeEvent() function above attaches events to nodes in a cross-browser fashion. Throughout the course, you'll find this in the ClassFiles/lib.js library.

Don't worry about the useCapture argument just yet. We'll explain it soon.

This observeEvent() function has a big advantage over the node.onevent style: it allows for multiple callback functions to be attached to a single event. The following example illustrates this.

Code Sample:

HTMLDOM/Demos/Events.html
---- C O D E   O M I T T E D ----

<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">
function setEvents1() {
	var trigger = document.getElementById("trigger");
	trigger.onclick=sayHi;
	trigger.onclick=sayBye;
}
	
function setEvents2() {
	var trigger = document.getElementById("trigger");
	observeEvent(trigger,"click",sayHi);
	observeEvent(trigger,"click",sayBye);
}

function sayHi() {
	alert("Hi!");
}

function sayBye() {
	alert("Bye!");
}

observeEvent(window,"load",function() {
	observeEvent(button1,"click",setEvents1);
	observeEvent(button2,"click",setEvents2);
});
</script>
---- C O D E   O M I T T E D ----

When the page loads, the "trigger" button has no events attached to it.

  1. Click on the button that reads "Attach events using node.onevent syntax," which runs the setEvents1() function. Then click on the "trigger" button. A single "Bye" alert pops up. This is because the call to sayHi() was replaced by the call to sayBye().
  2. Refresh the page and then click on the button that reads "Attach events using observeEvent() function," which runs the setEvents2() function. Now click on the "trigger" button again. Both the "Hi" and "Bye" alerts pop up. The order in which they pop up may depend on which browser you are using.

Being able to have multiple callback functions associated with a single object event can be useful. As an example, you might have a calculation() function that is triggered when a button is clicked. You may later want to make that same action (the click of the button) cause another part of the page to be updated. As these are two separate tasks, you would separate them into different functions, both of which can be tied to the same event.

Next