I'm using jQuery version 1.5. I am looking at jQuery's change() function and specifically at this bit:
.change( [ eventData ], handler(eventObject) )
eventData: A map of data that will be passed to the event handler.
handler(eventObject): A function to execute each time the event is triggered.
What exactly is a "map of data" in JavaScript? How can I use the following test function as an event handler?
var myHandler = function(msg){alert(msg);};
I've tried this:
$("select#test").change(["ok"], myHandler);
and the alert reports [object Object]
See event.data. The data is not passed as argument to handler, but as property of the event object:
$("select#test").change({msg: "ok"}, function(event) {
alert(event.data.msg);
});
The handler always only accepts one argument, which is the event object. This is the reason why your alert shows "[object Object]", your function is printing the event object.
If you want to use functions with custom arguments, you have to wrap them into another function:
$("select#test").change({msg: "ok"}, function(event) {
myHandler(event.data.msg);
});
or just
$("select#test").change(function(event) {
myHandler("ok");
});
Btw. the selector is better written as $('#test'). IDs are (should be) unique. There is no need to prepend the tag name.
What exactly is a "map of data" in Javascript?
Basically just an object, e.g.:
var data = {
foo: "I'm foo",
bar: "I'm bar"
};
All JavaScript objects are essentially maps (aka "dictionaries" aka "associative arrays").
How can I use the following test function as an event handler?
By wrapping it in another function:
$("select#test").change(function() {
myHandler($(this).val());
});
That calls myHandler with the value of the select box whenever it changes.
If you want to use the eventData part, add an object prior to the handler:
$("select#test").change({
foo: "I'm foo"
}, function(event) {
myHandler(event.data.foo, $(this).val());
});
That calls myHandler with the "I'm foo" as the first argument, then the value of the select box, whenever it changes.