What initially made this confusing for me is not understanding how the conventions for coding event handlers actually worked versus what was a named variable, combined with the implicit calls done by Javascript handlers when you set up event handlers like this:
Good 1
document.getElementById('testId').onkeypress = function(e) {
console.log(e.which);
}
Above, your browser is passing event to the handler as the function's first argument implicitly, so you can name your parameter (here, e) anything you want as long as you're consistent, even if you go crazy like this:
Good 2; creatively named
document.getElementById('testId').onkeypress = function(aWhopBopALuWhop) {
console.log(aWhopBopALuWhop.which);
}
But because of the way event is used as a global, cruddy code like this also works:
Cruddy scoping 1
document.getElementById('testId').onkeypress = function(aWhopBopALuWhop) {
console.log(event.which); // <<< decidedly NOT aWhopBopALuWhop
}
So you might also see doubly cruddy code like this:
Cruddy Scoping 2
document.getElementById('testId').onkeypress = function(event) {
console.log(event.which);
}
Now which event is event? Unfortunately, it doesn't matter. Regardless of scoping, we put event into event so event === event throughout! [sic]
But this does demonstrate that event isn't a reserved word. It's a variable. So where you can't say break = "spam";, you can say event = "spam";. So if you try to use break, which is reserved, it borks.
document.getElementById('testId').onkeypress = function(break) {
console.log(break.which);
}
What's important to learn (and what Ionut is essentially saying, I believe), is that your browser is silently passing the "global" event var into your onkeypress handler no matter what you call it in your function definition. Confusingly, even if you don't use your parameter to access event within your handler, you can still access event as a global, as show in Cruddy 1 & 2, above.
Now when I was calling from html-land with an onkeypress, paradigms started mixing in my head. Here, there is no silent passing of event into your handler function's arguments. You have to explicitly pass event yourself, like so:
<script>
function handlerNamed(namedParam) {
console.log(namedParam.which);
}
</script>
<input type="text" size="10" onkeypress="handlerNamed(event)"><br />
No other convention works! And this only works because the browsers support it, not because any ECMAscript standard defines event (afaik). You cannot use any of the below like you "could" with .onKeyPress by changing the name of the parameter to match in handlerNamed:
<!-- NONE OF THESE WORK, b/c ONLY event is defined! -->
<input type="text" size="10" onkeypress="handlerNamed(evt)"><br />
<input type="text" size="10" onkeypress="handlerNamed(e)"><br />
<input type="text" size="10" onkeypress="handlerNamed(aWhopBopALuWhop)"><br />
Make sense? I was in the middle of a much too complicated jsFiddle trying to write this up before it finally clicked in case that's helpful.
