JS Event Object--dom Event object in/ie/cross-browser Event object

Event Object
When triggering an event on the DOM, an event object is generated that contains all the information related to the event. Includes the element that caused the event, the type of event, and other information related to the specific event. For example, an event object that is caused by a mouse action contains information about the location of the mouse, and the event object that is caused by the keyboard action contains information about the key that was pressed. All browser objects support the event object, but are supported in different ways.

Event objects in the DOM

A DOM-compatible browser will pass an event object into a handler. The event object is passed in regardless of the method (DOM0 level or DOM2 level) that is used to specify the handler. Take a look at the following example

var btn = document.getElementById ("mybtn"); Btn.onclick = function (event) {    alert (event.type);     "Click"};btn.addeventlistener ("click", Function (event) {    alert (event.type);     "click"},false);    

The two event handlers in these two examples will pop up a warning box showing the type of event represented by the Event.type property. This property always contains the type of event that is triggered.
The event object is saved in the variable event when you specify the events handler through the HTML attribute. Take a look at the following example:

<input type= "button"  value= "click Me" onclick= "alert (event.type)"/>

The Event object contains properties and methods related to the specific event that created it. The types of events that are triggered are different, and the available properties and methods are different. However, all events will have members listed in the following table.

Properties/Methods	Type	Read/write	Description
Bubbles	Boolean	Read-only	Indicates whether the event bubbled
Cancelable	Boolean	Read-only	Indicates whether the default behavior of an event can be canceled
Currenttarget	Element	Read-only	The element whose event handler is currently processing the event
Detail	Integer	Read-only	Event-specific details
Eventphase	Integer	Read-only	The stage in which the event handler is invoked: 1 for the capture phase, 2 for "in Target", and 3 for the bubbling phase
Preventdefault ()	Function	Read-only	Cancels the default behavior of the event. If cancelable is true, you can use this method
Stoppropagation ()	Fucntion	Read-only	Cancels further capture or bubbling of the event. If Bubbles is true, you can use this method
Target	Element	Read-only	The goal of the event
Type	String	Read-only	The type of event being triggered
View	Abstractview	Read-only	The abstract view associated with the event. Equivalent to the Window object where the event occurred

Inside an event handler, the object this is always equal to the value of Currenttarget, and target contains only the actual target of the event . If the event handler is made directly to the target element, this, currenttarget, and target contain the same values. Take a look at the following example:

var btn = document.getElementById ("mybtn"); Btn.onclick = function (event) {    alert (event.currenttarget = = =);     True    alert (event.target = = = this)    //true};

This example detects the value of Currenttarget and target with this. Because the target of the Click event is the button, the three values are equal. If the event handler exists in the parent node of the button, the values are different.

Document.body.onclick = function (event) {    alert (event.currenttarget = = = Document.body);  True    alert (this = = = Document.body);   True    alert (event.target = = = document.getElementById ("mybtn"))  //true};

When you click the button in this example, this and currenttarget are equal to document.body, because the event handler is registered to this element. However, the target element is equal to the button element because it is the true target of the Click event. Because the event handler was not registered on the button, the Click event bubbled up to Document.body, where the event was processed.

To block the default behavior of a particular event, you can use the Preventdefault () method. For example, the default behavior of a link is to navigate to the URL specified by its href attribute when clicked. If you want to block the default behavior of link navigation, you can cancel it by using the linked onclick event handler, as in the following example

var link = document.getElementById ("MyLink"), Link.onclick = function (event) {    event.preventdefault ();};

Only events with the Cancelable property set to True can use Preventdefault () to cancel their default behavior. In addition, the Stoppropagation () method is used to immediately stop the propagation of an event in the DOM hierarchy, that is, to cancel further event capture or bubbling. For example, an event handler that is added directly to a button can call Stoppropagation () to avoid triggering an event handler that is registered on Document.body, as shown in the following example:

var btn = document.getElementById ("mybtn"), Btn.onclick = function (event) {    alert ("Clicked");    Event.stoppropagation ();}; Document.body.onclick = function (event) {    alert ("Body clicked");};

For this example, if Stoppropagation () is not called, two warning boxes will appear when the button is clicked. However, because the click event does not propagate to document.body at all, the OnClick event handler registered on this element will not be triggered.

The Eventphase property of the event object, which can be used to determine which stage of the event stream the event is currently in. If the event handler is called in the capture phase eventphase equals 1, if the event handler is on the target object, then Eventphase equals 2, and if the event handler is called during the bubbling phase, Eventphase equals 3. It is important to note that although the "in target" occurs in the bubbling phase, eventphase remains equal to 2. See Example:

var btn = document.getElementById ("mybtn"); Btn.onclick = function (event) {    alert (event.eventphase);   2};d Ocument.body.addEventListener ("click", Function (event) {    alert (event.eventphase);   1},true);d Ocument.body.onclick = function (event) {    alert (event.eventphase);   3};

When you click the button in this example, the first event handler is the one that was added to the docuemnt.body during the capture phase, and the result pops up with a warning box that appears as a 1 of the eventphase. Next, the event handler that is registered on the button is triggered, the Eventphase value is 2, and the last event handler that is triggered is the one that is added to document.body during the bubbling phase, and the value of the Eventphase is displayed as 3. And when eventphase equals 2 o'clock, this, target, and currenttarget are always equal.

The event object will only be present during the execution of a handler, and once the event handler has completed execution, it will be destroyed.

Event objects in IE

Unlike accessing the event object in the DOM, there are several different ways to access the event object in IE, depending on how you specify the event handler. When you add a handler using the DOM0-level method, the event object exists as a property of the Window object. Take a look at the following example:

var btn = document.getElementById ("mybtn"); Btn.onclick = function () {    var event = window.event;    alert (event.type);  "Click"};

However, if the event handler is added using Attachevent (), an event object will be passed in as an argument to the handler function, for example:

var btn = document.getElementById ("mybtn"), Btn.attachevent ("onclick", function (event) {    alert (event.type);  "Click"});

In the case of using attachevent () like this, the event object can also be accessed through the Window object, just as you would with a DOM0-level method. However, for convenience, the same object is also passed as a parameter.
If the event handler is specified through an HTML attribute, then a variable named event can also be used to access the events object.

<input type= "button"  value= "click Me" onclick= "alert (event.type)"/>

The event object for IE also contains properties and methods related to the events that created it. Many of these properties and methods have corresponding or related DOM properties and methods, but all event objects contain the properties and methods listed in the following table.

Properties/Methods	Type	Read/write	Description
Cancelbubbles	Boolean	Read/write	The default value is false, but setting it to true cancels event bubbling (as with the Stoppropagation () method in the DOM)
ReturnValue	Boolean	Read/write	The default value is true, but setting it to False can cancel the default behavior of the event (as with the Preventdefault () method in the DOM)
Srcelement	Element	Read-only	The target of the event (same as the target property in the DOM)
Type	String	Read-only	The type of event being triggered

Because the scope of an event handler is determined by the way it is specified, you cannot assume that this is always equal to the event target. Therefore, it is better to use event.srcelement to compare insurance. For example:

var btn = document.getElementById ("mybtn"); Btn.onclick = function () {    alert (window.event.srcElement = = =);  True};btn.attachevent ("onclick", function (event) {    alert (event.srcelement = = = this);  False});

In the first event handler (specified with the DOM0-level method), the Srcelement property equals this, but in the second event handler this equals window, which has a different value.

Cross-browser Event objects

Although the event objects of the DOM and IE are different, the similarities between them can still be taken out across browser scenarios. All the information and methods of the event object in IE are available in the DOM object, except that it is implemented differently. However, this correspondence makes it easy to implement the mapping between the two event models.

var eventutil = {Addhandler:function (element,type,handler) {if (Element.addeventlistener) {Element.ad        Deventlistener (Type,handler,false);        } else if (element.attachevent) {element.attachevent ("on" +type,handler);        } else {element["on" +type] = handler;    }}, Getevent:function (event) {return event? event:window.event;        }, Gettarget:function (event) {return Event.target | | event.srcelement}, preventdefault:function (event) {        if (Event.preventdefault) {event.preventdefault ();        } else {event.returnvalue = false; }}, Removehandler:function (Element,type,handler) {if (Element.removeeventlistner) {Element.removee        Ventlistner (Type,handler,false);        } else if (element.detachevent) {element.detachevent ("on" +type,handler);        } else {element["on" +type] = null;     }}, Stoppropagation:function (event) {   if (event.stoppropagation) {event.stoppropagation ();        } else {event.cancelbubble = true; }    }};

JS Event Object--dom Event object in/ie/cross-browser Event object