Megan — Thu, 01 Feb 2007 19:45:48 +0000

Okay, that seems to work, but how do I tell it what function to run? Before I had:

objblurHandler.eventCallBack = function() {
	validate('residence');
}

but I can't do that anymore. I need to pass the value to the validate() function...

JeevesBond — Thu, 01 Feb 2007 19:38:39 +0000

Looking at the code of that library, this should also work:

var objloadHandler = new eventHandler();
var objblurHandler = new eventHandler();

objblurHandler.eventCallBack = function() {
  alert('Our sublair is under attack!');
}

objloadHandler.eventCallBack = function() {
  objblurHandler.addEventHandler('name', 'blur', objblurHandler.eventCallBack);
  objblurHandler.addEventHandler('residence', 'blur', objblurHandler.eventCallBack);
  objblurHandler.addEventHandler('year', 'blur', objblurHandler.eventCallBack);
  objblurHandler.addEventHandler('email', 'blur', objblurHandler.eventCallBack);
  objblurHandler.addEventHandler('photopath', 'blur', objblurHandler.eventCallBack);
}

objloadHandler.addEventHandler(window,'load', objloadHandler.eventCallBack);

Cuts doon on the code a bit, eh?

I haven't tested this, but it should work.

JeevesBond — Thu, 01 Feb 2007 19:31:33 +0000

var objloadHandler = new eventHandler();
var objblurHandler = new eventHandler();

objblurHandler.eventCallBack = function() {
  alert('Our sublair is under attack!');
}

objloadHandler.eventCallBack = function() {
  objBlur = document.getElementById('residence');
  objblurHandler.addEventHandler(objBlur, 'blur', objblurHandler.eventCallBack);

  objBlur = document.getElementById('name');
  objblurHandler.addEventHandler(objBlur, 'blur', objblurHandler.eventCallBack);

  objBlur = document.getElementById('year');
  objblurHandler.addEventHandler(objBlur, 'blur', objblurHandler.eventCallBack);

  objBlur = document.getElementById('email');
  objblurHandler.addEventHandler(objBlur, 'blur', objblurHandler.eventCallBack);

  objBlur = document.getElementById('photopath');
  objblurHandler.addEventHandler(objBlur, 'blur', objblurHandler.eventCallBack);
}

objloadHandler.addEventHandler(window,'load', objloadHandler.eventCallBack);

Here's how you can re-use the same eventHandler object with multiple HTML elements. Sorry for the delay but I wanted to test this with an actual HTML form to see if it works. It seems fine.

I suspect your code wasn't working because it was trying to add the handlers before the page loaded, don't worry about getting it wrong: events can cause headaches! Nothing works in sequence, so they're confusing to programmers who expect to see everything running line by line.

My naming conventions (like prefixing everything with 'obj' or 'str') come from my VB background. The first three letters always denote the type of variable (or object) being used. Feel free to change it to suit yourself, there are no comments because I wrote all this off the top of my head in a hurry.

JeevesBond — Thu, 01 Feb 2007 17:46:27 +0000

Megan wrote: Oh, and one question: is it better to have a lot of separate .js files or to keep all my script in a few files?

Just seperate things logically as you see fit. Like I knew when creating 'event.js' that I'd need to plug it into lots of projects so I seperated it. It also does one thing (and hopefully does it well) so that made it a good thing to keep by itself too.

There're no real rules for this, just make sure you're consistent.

Will look at your code now... What have you done to it?!

Megan — Thu, 01 Feb 2007 15:10:32 +0000

Now I have this code, which allows me to use different event handlers and pass different functions. It still only works on the last makeEvent call:

var onloadHandler = new eventHandler();
var onblurHandler = new eventHandler();

function makeEvent(element, event, func) {
	onblurHandler.eventCallBack = function() {
	  func(element); // testing to make sure it works
	}
	
	onloadHandler.eventCallBack = function() {
	  onBlur = document.getElementById(element);
	  onblurHandler.addEventHandler(element, event, onblurHandler.eventCallBack); // adds event to the function in the eventHandlers.js file
	}
}


makeEvent('name', 'blur', validate);
makeEvent('residence', 'blur', validate);
makeEvent('year', 'blur', validate);
makeEvent('email', 'blur', validate_email);
makeEvent('photopath', 'blur', validate_photopath);

onloadHandler.addEventHandler(window,'load', onloadHandler.eventCallBack);

Oh, and one question: is it better to have a lot of separate .js files or to keep all my script in a few files?

Megan — Thu, 01 Feb 2007 14:39:07 +0000

Yay, it works! No, what would be the best thing to do when I have 4 fields I need to validate? Three of them get the same function, one gets a different function. I'll see what I can do with that but help would be appreciated

I tried wrapping the event creator part into a function and calling that for each field but it only works on the last one, so this isn't right:

var onloadHandler = new eventHandler();
var onblurHandler = new eventHandler();

function makeBlurEvent(event) {
	onblurHandler.eventCallBack = function() {
	  validate(event); // testing to make sure it works
	}
	
	onloadHandler.eventCallBack = function() {
	  onBlur = document.getElementById(event);
	  onblurHandler.addEventHandler(event, 'blur', onblurHandler.eventCallBack); // adds event to the function in the eventHandlers.js file
	}
}

makeBlurEvent('name');
makeBlurEvent('residence');
makeBlurEvent('year');
makeBlurEvent('email');

onloadHandler.addEventHandler(window,'load', onloadHandler.eventCallBack);

Oh, and I changed your obj to on because the obj made it more confusing to me. That's another problem with all these samples - abbreviations in the variable and function names and no commenting make it much harder to understand.

Megan — Wed, 31 Jan 2007 21:13:53 +0000

You should write a tutorial for the new site about this. I had a really hard time finding anything useful on a search.

JeevesBond — Wed, 31 Jan 2007 20:51:38 +0000

Well all you need to worry about are the first two blocks of code: the first goes in your HTML Head block. The second goes in a javascript file of your choice. Should work out of the box, then you can customise at your leisure!

The rest of all that is just an explanation.

Megan — Wed, 31 Jan 2007 20:42:26 +0000

Oooh, thanks for that sweetie! I think I might have to work on that tomorrow. Looks like a lot to do

JeevesBond — Wed, 31 Jan 2007 20:33:27 +0000

Well I found out how to do this a couple of years ago so have no idea where I learnt it! Probably from http://www.quirksmode.org that bloke knows what he's talking about.

Attached is a very small Javascript library with just a couple of functions I use every time I want to get Javascript code hooked onto an HTML event.

What you'll need to do is include that file into the html page code along with your own Javascript:

&lt;script src="event.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="yourcode.js" type="text/javascript"&gt;&lt;/script&gt;

Ending up with something like this in your declaration. In your yourcode.js file you should have some functions that will be associated with events, the library defines a function called eventCallBack for that purpose. The yourcode.js file should look something like:

var objloadHandler = new eventHandler();
var objblurHandler = new eventHandler();

objblurHandler.eventCallBack = function() {
  alert('Our sublair is under attack!');
}

objloadHandler.eventCallBack = function() {
  objBlur = document.getElementById('residence');
  objblurHandler.addEventHandler(objBlur, 'blur', objblurHandler.eventCallBack);
}

objloadHandler.addEventHandler(window,'load', objloadHandler.eventCallBack);

Note: the sublair thing is from a game called Savage. Play it, works on Linux and it's free (as in beer). Other than wanting to support a great game, it was the first thing that popped into my head.

Back to the code: this seems a bit backwards, but the code is in this order so functions are always available when loading: preventing errors. This makes more sense when broken down:

var objloadHandler = new eventHandler();
var objblurHandler = new eventHandler();

Firstly new event handler objects are created. These are defined in the library, one new object is required per event. They don't do anything at the moment as they haven't been hooked onto an event.

objblurHandler.eventCallBack = function() {
  alert("Our sublair is under attack!");
}

Then the eventCallBack function is added to our new objblurHandler object. Note that it is just added at this point (well the correct term is overloaded, but am not about to explain that!), not called or used at all. In fact this is the last function that will be called, when the 'residence' element blur event occurs.

objloadHandler.eventCallBack = function() {
  objBlur = document.getElementById('residence');
  objblurHandler.addEventHandler(objBlur, 'blur', objblurHandler.eventCallBack);
}

'
Like the eventCallBack function added to objblurHandler an eventCallBack is added to the objloadHandler, to be triggered after the page has finished loading. The 'residence' element cannot be accessed before the page has loaded, which is why this step is required.

The code within this function tells the objblurHandler object that when/if the 'residence' element blur event happens it should call the [incode]objblurHandler.eventCallBack[/incode] function.

objloadHandler.addEventHandler(window,'load', objloadHandler.eventCallBack);'
Finally we tell the objloadHandler that when the page load event happens the [incode]objloadHandler.eventCallBack[/incode] function should be called. This does all the blur event stuff just discussed.

Hope this makes sense, event handling isn't always the easiest of subjects.