event object
Represents an object that contains information about an event that has occurred.
Event models in browsers are different.
There is only one sort of event object in Internet Explorer before version 9, while other browsers support different event objects to provide the necessary data for each different event.
You can access the event object differently in different browsers:
-
The window.event property is supported by Internet Explorer, Opera, Google Chrome and Safari.
It returns a reference to an event object that is filled based on the current event.
In Internet Explorer, the event object always has the same members, regardless of the event, but only a part of them is filled based on the current event.
In Opera, Google Chrome and Safari, the type of the event object depends on the event. -
In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, when an event occurs, an event object is initialized and passed to the event handlers as the first parameter.
The type of the event object depends on the current event.
In Internet Explorer before version 9, an event object is passed to an event handler only if it is registered with the attachEvent method. If an event listener is registered with the attachEvent method, the passed event object is a copy of the window.event object in all Internet Explorer versions.
The registration of event handlers is also different:
- event handlers can be registered by inline event properties (e.g. obj.onclick = handler)
- with the addEventListener method in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9
- with the attachEvent method in Internet Explorer and Opera.
Event propagation and capturing:
There are two types of events, one propagates up the DOM hierarchy, the other does not (bubbles property).
When an event occurs, it is dispatched to the target element first.
The target element is the element on which the event occurred (target and srcElement properties).
If the event propagates up, then it will be dispatched to the ancestor elements of the target element in the DOM hierarchy.
The propagation can be stopped with the stopPropagation method and the cancelBubble property.
An event is always dispatched to the target element first, except if the event is captured.
The capturing mechanism works differently in different browsers.
- In Internet Explorer, the setCapture method can be used for set the mouse capture to an object. If an object has capture, then the capturable events will be dispatched to the object first and if an event propagates up, then it will be dispatched to the ancestor elements of the object after. If an event is captured, then it will not be dispatched to the original target element. At most one object can capture the mouse events at the same time.
-
In Firefox, Opera, Google Chrome and Safari, events can be captured by event listeners, not by objects.
Internet Explorer also supports this mechanism from version 9.
The addEventListener method can be used to register event listeners for capturing.
- When an event occurs, the event listeners that capture the event are called (capturing phase).
- After this phase, the event will be dispatched to the original target element (target phase).
- Finally, if the event propagates up, then it will be dispatched to the ancestor elements of the original target element (bubbling phase).
The example on the page for the eventPhase property demonstrates this mechanism.
If an object captures the mouse events with the setCapture method, then it captures the events for the entire browser window.
If an object registers an event listener for capturing with the addEventListener method, then the event listener captures only the events that occur on the element or its descendants.
Canceling the default action of an event:
For some events, it is possible to suppress the default action implemented by the browser.
For example, when the onclick event is canceled for a checkbox, then clicking on the checkox does not change its checked state.
Events can be canceled with the preventDefault method and the returnValue property, or by returning false from an event handler.
Syntax:
Properties that reference the object:
| • | window.event |
Methods that return the object:
| + | object.createEvent (eventType) |
| • | document.createEventObject ([eventObjToClone]) |
The base interface, through which you can add new functionalities to the event object, is the Event interface.
You can find several other interfaces on this page that are inherited from the Event interface.
These interfaces represent the available data for different event types.
A part of the event properties and methods is accessible to all event types, the rest can only be used for certain event types.
This page contains all event members that are supported by at least one of the event objects.
If you want to know what event objects support a member, see the page for the Event interface.
If you need a summary of events and event types, see the page for events in JavaScript.
Possible members:
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
The event object supports several constants.
A part of them is accessible to all event types, the rest can only be used for certain event types.
If you need a complete list of event constants, please see the members of the Event interface and the page for the interfaces inherited from the Event interface.
Example HTML code 1:
This example illustrates the use of the event object for inline event handlers. An instance of the event object is passed to the onclick event handler as the first parameter, in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9. An inline event handler behaves like a function, so the first parameter can be passed through the arguments object. See Example 2 and 3 as well.
|
|
||||
<head> <script type="text/javascript"> function GetEventType (eventObj) { if (eventObj) { alert ("The event handler got the event object as the first parameter."); } else { // Internet Explorer before version 9 alert ("The window.event object will be used."); eventObj = window.event; } // now the eventObj variable contains a reference to an instance of the event object alert ("The type of the event: " + eventObj.type); } </script> </head> <body> <button onclick="GetEventType (arguments[0]);">Click on me!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 2:
This example is similar to the previous one, but it uses the variable named 'event' instead of the arguments object to get the event object, because the first parameter of inline event handlers is always named as 'event' in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9. Furthermore, since the members of the window object can be accessed directly (without the 'window.' prefix) and the window.event property is supported by Internet Explorer, the variable named 'event' refers to the global event object in Internet Explorer before version 9. So the GetEventType method always gets the event object as the first parameter. See the next example as well.
|
|
||||
<head> <script type="text/javascript"> function GetEventType (eventObj) { if (eventObj) { alert ("The event handler got the event object as the first parameter."); } // now the eventObj variable contains a reference to an instance of the event object alert ("The type of the event: " + eventObj.type); } </script> </head> <body> <button onclick="GetEventType (event);">Click on me!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 3:
This example is the conclusion of the previous one. The GetEventType method does not need to check the existence of the eventObj parameter, because it always refers to the event object, so using a parameter named 'event' instead of 'eventObj' is a logical choice and results in more readable code.
|
|
||||
<head> <script type="text/javascript"> function GetEventType (event) { // the event variable contains a reference to an instance of the event object alert ("The type of the event: " + event.type); } </script> </head> <body> <button onclick="GetEventType (event);">Click on me!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 4:
This example registers an event handler in a shorthand form (inline event property). The event handler gets an instance of the event object as the first parameter, in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9. In Internet Explorer before version 9, the window.event property is used. See the next example as well.
|
|
||||
<head> <script type="text/javascript"> function GetEventType (eventObj) { if (eventObj) { alert ("The event handler got the event object as the first parameter."); } else { // Internet Explorer before version 9 alert ("The window.event object will be used."); eventObj = window.event; } // now the eventObj variable contains a reference to an instance of the event object alert ("The type of the event: " + eventObj.type); } function Init () { var button = document.getElementById ("myButton"); button.onclick = GetEventType; } </script> </head> <body onload="Init ();"> <button id="myButton">Click on me!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 5:
The eventObj parameter used by the previous example is equivalent to the window.event property in Opera, Google Chrome and Safari, so using a parameter named 'event' instead of 'eventObj' is a logical choice and results in more readable code.
|
|
||||
<head> <script type="text/javascript"> function GetEventType (event) { if (!event) { // Internet Explorer before version 9 event = window.event; } // now the event variable contains a reference to an instance of the event object alert ("The type of the event: " + event.type); } function Init () { var button = document.getElementById ("myButton"); button.onclick = GetEventType; } </script> </head> <body onload="Init ();"> <button id="myButton">Click on me!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 6:
This example registers an event handler with the addEventListener and attachEvent methods. The event handler always gets an instance of the event object as the first parameter, in all commonly used browsers.
|
|
||||
<head> <script type="text/javascript"> function GetEventType (event) { // the event variable contains a reference to an instance of the event object alert ("The type of the event: " + event.type); } function Init () { var button = document.getElementById ("myButton"); if (button.addEventListener) { // all browsers except IE before version 9 button.addEventListener ("click", GetEventType, false); } else if (button.attachEvent) { // Internet Explorer before version 9 button.attachEvent ('onclick', GetEventType); } } </script> </head> <body onload="Init ();"> <button id="myButton">Click on me!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 7:
This example shows how to pass the object to an event handler on which the event has been registered. Note that the object on which the event has occurred and the object referred to by this may be different. See the this keyword for details.
|
|
||||
<head> <script type="text/javascript"> function ChangeColor (elem) { elem.style.color = "#ff0000"; } </script> </head> <body> <button onclick="ChangeColor (this);">Change my text color to red!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 8:
This example is equivalent to the previous one, but it uses the addEventListener and attachEvent methods to register an event handler for the onclick event.
|
|
||||
<head> <script type="text/javascript"> function ChangeColor (elem) { elem.style.color = "#ff0000"; } function OnDocLoad () { var button = document.getElementById ("myButton"); if (button.addEventListener) { // all browsers except IE before version 9 button.addEventListener ("click", function () {ChangeColor (button)}, false); } else if (button.attachEvent) { // Internet Explorer before version 9 button.attachEvent ('onclick', function () {ChangeColor (button)}); } } </script> </head> <body onload="OnDocLoad ();"> <button id="myButton">Change my text color to red!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 9:
This example shows how to register object methods as event handlers.
|
|
||||
<head> <script type="text/javascript"> // ColorChanger object function ColorChanger (elem, colorTo) { this.Init (elem, colorTo); } ColorChanger.prototype.Init = function (elem, colorTo) { this.elem = elem; this.colorTo = colorTo; // save a reference to the current object var _this = this; /* use the saved reference within the registered function (the 'this' statement within the registered function refers to the function not the current instance of ColorChanger) */ this.elem.onclick = function () {_this.ChangeColor ()}; } ColorChanger.prototype.ChangeColor = function () { this.elem.style.color = this.colorTo; } // Attach ColorChanger instances to the buttons function OnDocLoad () { var button1 = document.getElementById ("button1"); var button2 = document.getElementById ("button2"); var colorChanger1 = new ColorChanger (button1, "#ff0000", 1); var colorChanger2 = new ColorChanger (button2, "#0000ff", 2); } </script> </head> <body onload="OnDocLoad ()"> <button id="button1">Change my text color to red!</button> <button id="button2">Change my text color to blue!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Related pages:
External links:
User Contributed Comments