CODEWITHSUNDEEP
javascriptevents
Dan
Dan

Reputation: 57881

Event keyword in js

I found this code working in Chrome, FF, and IE. However, I can't find any references to the "magic" event keyword on the web. See this

<html>
    <head>
        <script type="text/javascript">
            function handler(e){
                alert(e);
            }
        </script>
    </head>
    <body>
        <h1 onclick="handler(event);alert(0)">Click on this text</h1>
    </body>
</html>

This script STOPS working if I change event in brackets to something else. Is that a deprecated keyword?

Upvotes: 19

Views: 18787

Answers (5)

Malama
Malama

Reputation: 58

The word event is not only an "other reserved word" in JavaScript, it is a always reserved word in all JavaScript Events (Event). See here: https://developer.mozilla.org/en-US/docs/Web/API/Event

For an Event with a function like onclick="myFunction()", there are two solutions.

First: The onclick="myFunction(event)" passed the event to the function. This is similar by this.

You can test it with onclick="consloe.log(event)" and onclick="consloe.log(this)". event is here a reserved word equally this. this contains the (HTML) Element. event contains the Event.

Consider onclick="myFunction(evt)" don't work (Error: evt is undefined).

Whit the example below, the event passed not only into the myFunction(), but it can used as a variable inside the function. This is not necessary in simple matters like this, because event is always global inside the function.

<a href="https://www.example.com" onclick="myFunction(event)" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction(evt) {
  var confirmresult = confirm("Press a button!");
  if (confirmresult == true) {
    // OK = go away!
  } else {
    // Cancel = stay here!
    evt.preventDefault(); // is in this case the same as event.preventDefault();
  }
};
</script>

JSFiddle: https://jsfiddle.net/usfrc6dn/

Second: Nothing is vissible passed in the onclick="myFunction()". The event is used inside the function.

<a href="https://www.example.com" onclick="myFunction()" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction() {
  var confirmresult = confirm("Press a button!");
  if (confirmresult == true) {
    // OK = go away!
  } else {
    // Cancel = stay here!
    event.preventDefault();
  }
};
</script>

JSFiddle: https://jsfiddle.net/qczt587u/

Only the second methode is valide in the reference of the docs, because about the using of event as onclick="myFunction(event)" is nothing to find, respectively only for onclick="myFunction(this)". When you have other information, please make a correction.

When you use onclick="myFunction(event)", you can use the event inside the function as a variable like function myFunction(evt) { evt.preventDefault();}. But that have a little bit risk. Either, the event is automatically passed to functions that are embeeded or called inside the function. Also is only onclick="myFunction()" without risk and also valid.

Examples:

<div id="foo" onclick="foo();">click me!</div>
function foo(evt) {
  console.log(evt); // undefined
  console.log(event); // the Event "click" Object
}

<div id="foo" onclick="foo(evt);">click me!</div>
// ERROR: the variable "evt" is not defined!

<div id="foo" onclick="foo(event);">click me!</div>
function foo(evt) {
  console.log(evt); // the Event "click" Object
  console.log(event); // the Event "click" Object
}

<div id="foo" onclick="foo();">click me!</div>
function foo() {
  console.log(this); // the Function "foo" Object
  console.log(event); // the Event "click" Object
}

<div id="foo" onclick="foo(this);">click me!</div>
function foo() {
  console.log(this); // the Function "foo" Object
  console.log(event); // the Event "click" Object
}

<div id="foo" onclick="foo(this);">click me!</div>
function foo(element) {
  console.log(element); // the Element "div" Object
  console.log(this); // the Function "foo" Object
  console.log(event); // the Event "click" Object
}

<div id="foo" onclick="foo(this);">click me!</div>
function foo(this) {
  // ERROR: foo is not a function.
  // Cause: 'this' is a reserved word.
  console.log(element);
  console.log(this);
  console.log(event);
}

<div id="foo" onclick="foo(this);">click me!</div>
function foo(event) {
  console.log(this); // the Function "foo" Object
  console.log(event); // the Event "click" Object
}

There are also differences between this and event that are to consider.

Conclusion: Only onclick="myFunction()" is without risk and also valid in the matter of event.

Upvotes: 0

Birkensox
Birkensox

Reputation: 3721

This really threw me. The following 'typo' works in Chromium, but not FF:

some_worker.onmessage = function(e) {

    // do stuff

    if (e.data instanceof ArrayBuffer)
        intArray = new Uint8Array(event.data);

    // do other stuff
};

Chromium was observing the implicit keyword for 'event' but FF threw an 'undefined variable' error! Just changed 'event' to 'e' and all is well.

I notice that even stackoverflow's code markup observes 'event' as an implicit keyword ... not to knock FF, since it detected the typo.

Upvotes: 3

Jo&#227;o Louros
Jo&#227;o Louros

Reputation: 2760

I guess your are trying to pass the clicked HTML element to your handler() function. The correct way to do that i your code is: <h1 onclick="handler(this);">Click on this text</h1>

However I strongly recommend avoid this approach. Avoid having styling and behavior defined on the HTML. Please read the following article: Unobtrusive JavaScript

Upvotes: -3

Felix Kling
Felix Kling

Reputation: 816422

The Event object is automatically passed to all event handlers. If you add event handlers with addEventListener, you can choose the parameter name (like you did in handler). But for code attached with the onclick attribute, you can only access the event object via the implicit variable event.

If you want to know more about event handling in general, I suggest to read about it at quirksmode.org.

Also have a look at MDC - Event handlers:

These are properties that correspond to the HTML 'on' event attributes.

Unlike the corresponding attributes, the values of these properties are functions (or any other object implementing the EventListener interface) rather than a string. In fact, assigning an event attribute in HTML creates a wrapper function around the specified code. For example, given the following HTML:

<div onclick="foo();">click me!</div>

If element is a reference to this div, the value of element.onclick is effectively:

function onclick(event) {
   foo();
}

Note how the event object is passed as parameter event to this wrapper function.

Upvotes: 25

Andy E
Andy E

Reputation: 344575

When an event attribute is set, an implicit Function is created with event as the first argument. When the event fires, the event object is passed to that function. There wasn't a solid definition on this behavior until HTML 5 (which is still a draft), but it's been this way for a long time in the major browsers and that's how it made it into the spec:

When an event handler's Function object is invoked, its call() callback must be invoked with one argument, set to the Event object of the event in question.

That argument is aptly named event for obvious reasons. http://www.w3.org/TR/html5/webappapis.html#events

Upvotes: 5

Related Questions