I am a beginner to Javascript. And when I was practicing I have noticed something.
Take this function:
<script type="text/javascript">
function showChar(sSomeData, oEvent)
{
alert (oEvent.keyCode);
return true;
}
</script>
When I call this function as this:
<input type="text" id="txtTextBox" onkeypress="return showChar('some text', oEvent);" />
I get a JS error: "Microsoft JScript runtime error: 'oEvent' is undefined"
But if I rename oEvent with 'event' like:
<input type="text" id="txtTextBox" onkeypress="return showChar('some text', event);" />
Then it works fine. My conclusion is 'event'is a reserved word which stands for event argument in Java Script. But when I have checked the net I did not see 'event' as a reserved word.
Am I mistaken or it is not really documented as a reserved word?
Thanks!
It is not a reserved keyword, but it is a global variable in IE at least.
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.
Well, the code:
onkeypress="return showChar('some text', oEvent);"
Is the equivalent of the following JavaScript code:
element.onkeypress = function (eventObjectName) {
return showChar('some text', eventObjectName);
};
It's just that browsers name the event argument as event
.
So, the value of the attribute is wrapped in a JS function which receives an argument named event
which is the event object.
No, event
is not a reserved word. It is, however, a variable which is set by all the major browsers when an event handler (such as onkeypress) of a DOM node is being executed. In IE, it is also a global variable.
A typical cross-browser way to get the event is along these lines.
On the DOM node:
<div onclick='someFunction(event)'>Click me</div>
The event handling function:
function someFunction(evt) {
var srcElem = evt.srcElement || evt.target;
// Code continues
}
By the way, in your example, oEvent
is the name of the parameter and is therefore valid in the context of the function being called, not in the context of the caller.
This is old, but since I stumbled over it I figure I might as well answer.
http://www.w3schools.com/js/js_reserved.asp says that event is NOT a reserved word, as mentioned in the comments above. However, if you read further down the page....
"Windows Reserved Words JavaScript can be used outside HTML. It can be used as the programming language in many other applications.
In HTML you must (for portability you should) avoid using the name of HTML and Windows objects and properties:"
And 'event' is displayed in the table below. So can you use it? Sure. Should you use it? No. There are heaps of examples on stackoverflow that use event, but they're using it for clarity. When you use that code, you need to edit it.
来源:https://stackoverflow.com/questions/1510094/is-event-a-reserved-word-in-javascript