Avoiding inline event handlers in Javascript

Update: i found this page which says that I need to load the event handler parts in an onload event. That seems to have helped but it's still not working right. The function works but the event handler doesn't, if that makes any sense. You can see it here, on the residence field:

http://www.housing.uwaterloo.ca/profiles/individual.php

(I took out that code now so don't bother with that last link).

Come on, please? Anyone? I need to have this working by the end of the week (preferably tomorrow!)

I wish I could help meg, but I know crap all about javascript. It's next on my 'stuff to learn list'.

If I understand correctly what you are trying to do, your logic is fundamentally flawed. JavaScript events must be triggered by HTML code, or simply executed as your browser loads the page.

All that onload does is allows you to execute a specific function when the code loads. The same thing can be accomplished by simply not placing the code within an actual function. The code would then simply execute as your browser rendered the page, more or less.

EDIT: Scratch that, hang on...

Okay, I was wrong. I read through that guy's page that you linked to, then through a JavaScript book's 1 page on the subject.

It turns out that you can't pass any variables when you create an event handler like that. Here's what the book says...

Quote: Note that there are no parentheses after the function name. That is because we don't want to invoke the function here; we just want to assign a reference to it.

A workaround might be to call a different function, say validateresidence. Then that function would be assigned to the event handler, and would itself call validate, passing the string 'residence' to validate.

Make any sense?

Okay, that's helpful. Will try again after lunch.

I can't believe the lack of basic information avialable about this. All the expert type people say not to do it but I wasn't able to find any basic instructions.. They debate the finer points and have snippets of code that depend on you knowing other parts of the process or trying to do something much more complicated.

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:

'

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:

'

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:

'

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.

'

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.

'
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.

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

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.

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

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:

'

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.

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:

'

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 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?!

'

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.

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

'

Cuts doon on the code a bit, eh?

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

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

'

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