Detaching Events

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

Detaching Events

Our game, though extremely advanced and likely to sell well, has one small issue: clicks on the field are captured even before the Start button is pushed. Also, the Start button should be disabled when the game is active. We need to do the following three things to improve the game:

  1. We should not start observing clicks on the field and ball until the Start button has been pushed.
  2. We should then stop observing those events after the game is finished.
  3. We should disable the Start button when the game is active.

The first part is easy. We simply move the observeEvent() calls for the Field and Ball to the end of the start() function:

function start() {
	... observeEvent(document.getElementById("field"),"click",miss,false);
	observeEvent(document.getElementById("ball"),"mousedown",hit,false)
}

To do the second part, we need to learn how to detach events; in other words, to stop observing events. According to the specification, this is done using the removeEventListener() method, which takes the same three arguments as the addEventListener() method:

target.removeEventListener(eventName, observerFunction, useCapture);

So, to stop capturing clicks on the Ball, we could use this code:

document.getElementById("ball").removeEventListener("mousedown", hit, false);

Unfortunately, as you might expect, this is handled differently by IE8 and earlier, which uses the following code:

target.detachEvent("on" + eventName, observerFunction);

We have included the following cross-browser unObserveEvent() function in our ClassFiles/lib.js:

function unObserveEvent(target, eventName, observerFunction, useCapture){
	if (target.removeEventListener) {
		target.removeEventListener(eventName, observerFunction, useCapture);
	} else if (target.detachEvent) {
		target.detachEvent("on" + eventName, observerFunction);
	}
}

Applications with a lot of event listeners can suffer from memory leak issues, so it is important to remove event listeners that are no longer being to used.

Now back to our soccer game. To stop observing the click events on the Ball and Field, we can add an endGame() function:

function endGame() {
	unObserveEvent(document.getElementById("field"),"click",miss,false);
	unObserveEvent(document.getElementById("ball"),"mousedown",hit,false);
}

Now the only thing we have left is to disable the Start button when the game starts. We can do that by adding this line to the start() function:

document.getElementById("start").disabled=true;

We then have to re-enable it when the game ends, so we add this line to our new endGame() function:

document.getElementById("start").disabled=false;

Here is the complete code with the new bits highlighted:

Code Sample:

HTMLDOM/Demos/soccer-game-detach-event.html
---- C O D E   O M I T T E D ----

	var timer = null;
	observeEvent(window,"load",function() {
		observeEvent(document.getElementById("start"),"click",start,false);
		//removed observeEvent calls for ball and field
	});
---- C O D E   O M I T T E D ----

	function start() {
		var ball = document.getElementById("ball");
		document.getElementById("start").disabled=true;
		ball.style.top="92px";
		ball.style.left="92px";	
		document.getElementById("click-count").innerHTML="0";
		timer=setInterval(function() { moveBall(ball) },20);
		
		observeEvent(document.getElementById("field"),"click",miss,false);
		observeEvent(document.getElementById("ball"),"mousedown",hit,false);
	}
---- C O D E   O M I T T E D ----

	function endGame() {
		unObserveEvent(document.getElementById("field"),"click",miss,false);
		unObserveEvent(document.getElementById("ball"),"mousedown",hit,false);
		document.getElementById("start").disabled=false;
	}
---- C O D E   O M I T T E D ----
Next