Resolution of compatibility issues:
Because IE and Dom are different in how modern event handlers are assigned, to ensure that the code we write is available under the IE and Dom Browser series, we can use the following code to resolve compatibility issues:
var fnClick1 = function () {
Aleart ("I was clicked";)
}
var fnClick2 = function () {
Aleart ("I was also clicked";)
}
var odiv = document.getElementById ("Div1");
if (Document.addeventlistener) {//dom
Odiv.addeventlistener ("Click", FnClick1, True);
Odiv.addeventlistener ("Click", FnClick2, True);
}
else if (document.attachevent) {//ie
Odiv.attchevent ("onclick", fnClick1);
Odiv.attchevent ("onclick", FnClick2);
}
If Document.addeventlistener returns undefined under IE, then (document.addeventlistener), the value of this logical expression is false.
Similarly, if you are in a supported DOM2 browser such as Firefox, Document.attevent is returning undefined. In a similar way, we can resolve browser compatibility issues.
(IE 5.0 7.0 8 only support IE, IE 9.0 10.0 support; IE 11 only supports DOM; other browsers only support DOM)
Event object:
In Internet Explorer, the event object is a property of the Window object.
This means that the event handler must access the events object as follows:
Odiv.onclick = function () {
var oevent = window.event;
}
Even if the event object is a property of the Window object, it can only be accessed when the events occur. After all event handlers have been executed, the event object is destroyed.
The DOM standard specifies that the event object can only be passed to the events handler as the only parameter. Therefore, in order to access the event object in a DOM-compatible browser (for example, Mozilla, Safari, Opera), you must visit the following code:
Odiv.onclick = function () {
var oevent = atguments[0];
}
Of course, we can also give the parameter a name as follows:
Odiv.onclick = function (oevent) {
}
In order to use the event object correctly, we must first determine the type of browser that browses our web page, and the following code demonstrates a simple way to determine the browser type:
<title> cross-browser programming </title>
<script type= "Text/javascript" >
function BrowserType (oevent) {
if (window.event) {//judgment is not ie
document.getElementById ("P1"). InnerHTML = "IE";
}
else if (oevent) {//judgment is not DOM
document.getElementById ("P1"). InnerHTML = "DOM";
}
}
</script>
<body>
<p onclick= "BrowserType (event);" >Hello,JS!</p>
<p id= "P1" > What browser does it use? </p>
</body>
Modern event handlers and events objects to determine and resolve browser compatibility
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
