Look at the example below,
Copy Code code as follows:
var btn = document.getElementById (' mybtn ');
Btn.onclick = function () {
var event = window.event;
alert (event.type);//"Click"
}
At this point, the event object originates from the Window.event object and is then used to determine the event type. However, when EventHandler is authorized in this way by attachevent (), the event object will be the only parameter to the function, see the following code
Copy Code code as follows:
var btn = document.getElementById ("mybtn");
Btn.attachevent ("onclick", function (event) {
alert (Event.type); "Click"
});
When using the Attachevent () method, the event object can also be accessed on the Window object, as is the DOM 0 level implementation, and the event object is also passed in as a parameter.
If the event Handler is authorized through HTML attributes, the event is accessed as a variable, called an event. For example
Copy Code code as follows:
<input type= "button" value= "click Me" onclick= "alert (event.type)" >
The IE Event object also contains properties and methods, which are related to creating the particular event. These properties and methods either map directly to the properties and methods of the DOM, or are related to the properties and methods of the DOM. The properties and methods of a DOM event object differ from the starting events, but the common methods are as follows:
Canclebubble Boolean readable/writable defaults are false, but can be set to True to cancel event bubbling, as in the Stoppropagation () method in the DOM.
The returnvalue Boolean readable/writable default is True, and the default behavior used to cancel an event is the same as Preventdefault () in the DOM when set to false.
The target of the srcelement element read-only event, the same as the target attribute in the DOM.
The type string reads only the event types that are triggered.
Because event handler is determined by the authorization method, the value of this should not always point to the target of this event, so use event. Srcelement to replace. Examples are as follows
Copy Code code as follows:
Btn.onclick = function () {
Alert (Window.event.srcElement = = this); True
};
Btn.attachevent ("onclick", function (event) {
Alert (Event.srcelement = = this); False
});
is authorized in the first event handler through a DOM0 level, so the Srcelement property points to this, but differs in the second event handler between the two values.
The ReturnValue property is equivalent to the Preventdefault () method in the DOM, which is also used to cancel the default behavior of the event, and you need to set the ReturnValue property value to False to cancel the default action for the event, see the following example;
Copy Code code as follows:
var link = document.getElementById (' MyLink ');
Link.onclick = function () {
Window.event.returnValue = false;
};
In this example, use the ReturnValue property to cancel the default behavior of the connection. Unlike DOM, there is no way to determine whether an event can be canceled or to disable JavaScript.
The Canclebubble property is the same as none of the stoppropagation (), blocking the bubbling of events. Because the IE8 or earlier version of IE does not support the event capture phase, and canclebubble only supports bubbling cancellation, stoppropagation () is the capture and bubbling of the cancellation event. For example:
Copy Code code as follows:
var btn = document.getElementById ("mybtn");
Btn.onclick = function () {
Alert ("clicked");
Window.event.cancelBubble = true;
};
Document.body.onclick = function () {
Alert ("Body clicked");
};
Through love onclick This handler sets the value of cancelbubble to true, and he blocks events from bubbling to document.body event handling, so when BTN is clicked, the result only pops up a prompt dialog box, which is "click".
