Is 'event' a reserved word in JavaScript?

坚强是说给别人听的谎言 提交于 2019-11-28 22:38:25

It is not a reserved keyword, but it is a global variable in IE at least.

ruffin

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!