unobtrusve Javascript allows parameters from HTML inputs how?

[Jake Barnes]

Nowadays many web designers are combining several pieces of 3rd party
Javascript to get the effects they want. For instance, a designer might
combine Prototype and Tooltips to get interactive effects. Since
Prototype and Tooltips are created by two different Javascript
programmers, both packages need to do their best to not interfere with
each other (they need to be "unobtrusive Javascript").

Many scripts depend on acheiving some effect once the page has loaded
(and the onload event is triggered). Simon Willison made an important
contribution to Unobtrusive Javascript when he found an unobtrusive way
to attach an unlimited number of actions to the page's onload event.
This function of Willison allows one programmer to load their code
without interfering with the code of any other programmer:


function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}


using the above, I created the function below to allow my own code to
add an unlimited number of actions to an elements onclick event:




function addToOnClick(idOfElementToBeAddedTo,
functionToHaveAddedReference) {
// 07-08-06 - this function is styled after the addLoadEvent function,
but this
// adds a new function to an elements onclick element. The first
parameter is the id
// of the element whose onclick event we are adding to. The second
parameter is
// the function reference we are adding. - LK
//
// Look here for more info on addLoadEvent:
//
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
//
// Most of the time it'll be wrapped in addLoadEvent. After all, you
can't add an event
// handler to an HTML element that hasn't loaded yet, so you need to
wait till everything
// has loaded.

if (document.getElementById &&
document.getElementById(idOfElementToBeAddedTo)) {
var elementReference =
document.getElementById(idOfElementToBeAddedTo);
var oldOnClick = elementReference.onclick;

if (typeof elementReference.onclick != 'function') {
elementReference.onclick = functionToHaveAddedReference;
} else {
elementReference.onclick = function() {
oldOnClick();
functionToHaveAddedReference();
}
}
}
}


I don't know much about Javascript since I rarely work in it. I'm
curious how I could pass arguments to the onclick event of an element,
using something like the function above? For instance, if I have an
element like this:

<a id="caption4" href="index.php">Make bigger</a>

Suppose I attach an action to this link. When it is click, is there any
way to get the id of this element to the action that then gets
triggered?