Hi SitePoint/JavaScript.

This is a post about understanding principles of correct coding practise, and probably also about an example or two of how it can look. It may also be about pointing me to the right resource to read so please: be patient

Say I have this function defined:

function myFunc(par1,par2) {...}

I can call it as many times I want, passing the relevant params, with an event handler:

onchange="myFunc('apple','orange')"

Now, its my understanding - but please correct me here if I got that wrong - that recommended best practise is to get away from event handlers and keep all logic separate in the external JavaScript libraries, leaving only the markup in the display file. Plus it allows for coding very clean degrading in cases where JavaScript is turned off etc. etc...
All fine, I would like to go down this lane...

Using Prototype I can bind my function - myFunc - to a given tag id - myTagID - when the page loads like this (I think - it works at least):

Event.observe(window,'load',function() {
Event.observe('myTagID','change',myFunc);
});

But that binds the function to one specific tag id, and the params must be hardcoded into the function - so it seems to me. I'm sure I'm wrong here, I hope someone can explain this to me.

I can also bind my function to more than one tag by not using a tag id but iterating through the DOM for tag names. That method seems most useful when you want to add general functionality and, in particular, CSS styling to markup elements etc, but it still doesn't accomplish what the event handler method does: that each function call passes its own, unique params.

So because of my limited understanding - both of JavaScript and of what I can do with Prototype - it seems to me that the event observer method is less flexible and actually less "abstracted" since I don't see how I can reuse functions only changing the params.

Thanks a lot in advance, Nikolaj