The Internet Explorer Event Object_javascript skills

Look at the example below,

Copy code The code is as follows:

　var btn = document.getElementById( 'mybtn');
btn.onclick = function(){
var event = window.event;
alert(event.type);//"click"
}

At this point, the event object is derived from the window.event object, and is later used to determine the event type. However, when the eventHandler is authorized through attachEvent(), the event object will be used as the only parameter of the function. Please see the following code

Copy code The code is 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, and is implemented at DOM level 0 The method is the same, 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 event. For example,

Copy code The code is as follows:

The IE event object also contains properties and methods, which are related to creating that specific event. These properties and methods either directly map to DOM properties and methods, or are related to DOM properties and methods. The properties and methods of DOM event objects vary depending on the triggering event, but the common methods are as follows:
CancleBubble Boolean readable/writable default value is false, but can be set to true to cancel event bubbling , the same as the stopPropagation() method in dom.
ReturnValue Boolean Readable/Writable The default value is true. When set to false, the default behavior used to cancel the event is the same as preventDefault() in dom.
srcElement element read-only The target of the event is the same as the target attribute in dom.
type　 String read-only The type of event that was triggered.
Because the event scope of the event handler is determined by the authorization method, the value of this should not always point to the target of this event, so event.SrcElement is used instead. The example is as follows
{
alert(window.event.srcElement === this); //true

}; btn.attachEvent("onclick", function(event){ alert(event.srcElement = == this); //false });

In the first event handler, authorization is done through DOM0 level, so the srcElement attribute points to this, but in the first event handler These two values ​​are different in the two event handlers.

The returnValue attribute is equivalent to the preventDefault() method in the DOM. It is also used to cancel the default behavior of the event. You need to set the returnValue attribute value to false to cancel the default action of the event. Please see the following example;




Copy code

The code is as follows:


var link = document.getElementById('myLink');
link.onclick = function(){

window.event.returnValue = false; }; 　 In this example, the returnValue attribute is used to cancel the default behavior of the connection . Unlike DOM, there is no way to determine whether an event can be canceled or disable JavaScript. The cancleBubble attribute has the same function as stopPropagation(), preventing the event from bubbling. Because IE8 or earlier IE versions do not support the event capture phase, and cancleBubble only supports bubbling cancellation, while stopPropagation() cancels the capture and bubbling of events. For example:

Copy code

The code is as follows:


var btn = document.getElementById("myBtn" );
btn.onclick = function(){

alert("Clicked"); window.event.cancelBubble = true; }; document.body.onclick = function( ){ alert("Body clicked"); };

By setting the value of cancelBubble to true in the onclick handler, it prevents the event from bubbling up to document.body event processing. Therefore, when btn is clicked, only a prompt dialog box will pop up, that is, "click ".