A variety of browser compatibility issues _ basic knowledge

Source: Internet
Author: User
about setting the OnLoad event handle with a script
<body> <script> document.body.onload=function () {alert ("!")} </script> </body>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

In IE, opera are normal and effective, but FF neither execute nor error, because in ff,document.body.onload is undefined (undefined), a function to assign value to undefined neither what happened, nor error.
This is written in IE, opera, and FF:
<body> <script> window.onload=function () {alert ("!")} </script> </body>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

about binding event handles with scripts
IE under the use of attachevent, FF AddEventListener

The relevant discussions are as follows:
Http://search.blueidea.com/?q=addEventListener&bisearch=bbs
(basically see a few stickers to understand, I do not say in detail.) Please do not top the old stickers, thank you.

Reference Links:
Http://bbs.blueidea.com/viewthre ... p;page=1#pid2248824
http://bbs.blueidea.com/viewthread.php?tid=2507914
about floating code and Documentelement/body
It is often asked why the floating AD/couplet code is not available under XHTML 1.1 DTD file Header/FF
This is because, by standard, the scroll bar of the form we see should not be the body, but the HTML (that is, the Document.documentelement object).
So the solution is to transform Document.body.scrollTop or similar code into DOCUMENT.DOCUMENTELEMENT.SCROLLTOP in previously non-standard code
references to IDs and HTML object elements
The cause of the problem is very, very much. But a basic prerequisite is that for IE, an HTML element ID can be used directly in the script as a variable name, but not in FF.
Copy Code code as follows:
<input id= "T1" ><input type= "button" value= "click Me" onclick= "alert (t1.value)" >

Copy Code code as follows:
<input id= "T1" ><input type= "button" value= "click Me" onclick= "alert (document.getElementById (' T1 '). Value)" >

About usage differences for event objects
In IE, when an event is fired, there is a global window.event object that holds the information about the event
IE only
<input type= "button" onclick= "alert (event.type)" onfocus= "alert (event.type)" >
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

FF, when an event is fired, a local event object is passed as the first argument to the event handler function
FF only
<input type= "button" onclick= "alert (arguments[0].type)" onfocus= "alert (arguments[0].type)" >
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

In addition, IE's event object and FF's event object are slightly different.
Here are my common forms of compatibility
<script> function Doevent (e) {var e=window.event?window.event:e; var srcele=e.srcelement?e.srcelement:e.target; alert (Srcele.value); } </script> <input value= "Click Me" onclick= "doevent (Arguments[0]);"/>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Reference
Http://bbs.blueidea.com/thread-2667939-1-1.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.