Jump to content

What is global object "event" ?


Mike3456

Recommended Posts

On the HTML tutorial page at http://www.w3schools.com/html/html5_draganddrop.asp

the example uses the attributes

ondragstart="drag(event)"

ondrop="drop(event)"

ondragover="allowDrop(event)"

 

and all of them use the parameter "event" that seems to be a global object. Just to test it, I removed the parameter from all three functions

and made them reference the "event" directly, and it works the same way. The issue is that this "event" is not readily documented. I did some

searches but none led to direct answers. Where is this "event" defined? Usually global objects have longer names with camel notation,

so the name "event" itself is unusual .

 

 

 

 

Link to comment
Share on other sites

Inside the event attributes, when an event is fired it will pass an event object with data about the event. It's not global, it's local to the block of code inside the event attribute.

 

In ordinary Javascript, that's equivalent to the "e" in

element.ondragstart = function(e) {
}

Personally I believe W3Schools should not be teaching people to use attributes for events. They should teach addEventListener() and the older standard event model with events as methods of the object.

Link to comment
Share on other sites

Inside the event attributes, when an event is fired it will pass an event object with data about the event. It's not global, it's local to the block of code inside the event attribute.

 

In ordinary Javascript, that's equivalent to the "e" in

element.ondragstart = function(e) {
}

Personally I believe W3Schools should not be teaching people to use attributes for events. They should teach addEventListener() and the older standard event model with events as methods of the object.

 

 

I just explained that the event functions can access "event" when it is removed from the parameter list meaning the attributes are now defined as:

ondragstart="drag()"

ondrop="drop()"

ondragover="allowDrop()"

This means "event" is global and comes from JavaScript which is strange in itself because the HTML elements are outside <script> block when "event" is used a parameter

Link to comment
Share on other sites

That's a behavior I did not expect, except in Internet Explorer. Internet Explorer has a global object called event on the window object, or at least it used to. I'm not sure if they've removed that feature in new versions, after all it is not standard.

Link to comment
Share on other sites

That's a behavior I did not expect, except in Internet Explorer. Internet Explorer has a global object called event on the window object, or at least it used to. I'm not sure if they've removed that feature in new versions, after all it is not standard.

When I remove "event" from the parameter list as listed below, it works only in Chrome. I tried the same in Firefox and it does not work. But even in Firefox, "event" has to be global because I changed the argument name to "event1" in all calls and this does not work either. This means that Firefox implements these attributes with some kind of kludge where the argument name has to be "event", i.e. global

========================
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop() {
event.preventDefault();
}
function drag() {
event.dataTransfer.setData("text", event.target.id);
}
function drop() {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop()" ondragover="allowDrop()"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag()" width="336" height="69">
</body>
</html>
Link to comment
Share on other sites

I would not trust that functionality. According to MDN the "event" variable is local to the attribute's scope.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes

 

 

In the JavaScript code executed in response to the event, this is bound to the HTML element and the Event object can be reached using the event variable in the scope of the attribute.

 

While the event variable may be global in some browsers for some reason, I don't believe you can trust it to always be there. It may not be available in all browsers and on browsers where it is available it may disappear after a browser update

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...