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.
