Four cross-browser functions in Javascript

The following four functions are part of them.

first, we need to add a browser detection Script:
copy Code the code is as follows: /**********************************
* Check the browser
********************************** */
var user = navigator. useragent;
var browser ={};
browser. opera = user. indexof ("Opera")>-1 & typeof window. opera = "object";
bro Invalid. khtml = (user. indexof ("khtml")>-1 | user. indexof ("applewebkit")>-1 | user. indexof ("Konqueror")>-1 )&&! Browser. Opera; browser. Ie = user. indexof ("MSIE")>-1 &&! Browser. Opera;
browser. Gecko = user. indexof ("gecko")>-1 &&! Browser. khtml;
If (browser. IE) {
var ie_reg =/MSIE (\ D ++ \. \ D +); //;
ie_reg.test (User);
var v = parsefloat (Regexp ["$1"]);
browser. ie55 = V <= 5.5;
browser. IE6 = V <= 6;
}

1) bind an event ()
Everyone knows this. The event binding function of IE is attachevent, while Firefox and Safari are addeventlistener, and opera supports both. Encapsulation.Copy codeThe Code is as follows :/************************************
* Add event binding
* @ Param OBJ: element of the event to be bound
* @ Param type: event name. "On" is not added. For example, "click" instead of "onclick ".
* @ Param FN: event processing function
************************************/
Function BIND (OBJ, type, FN ){
If (obj. attachevent ){
OBJ ['E' + Type + FN] = FN;
OBJ [type + FN] = function () {OBJ ['E' + Type + FN] (window. Event );}
OBJ. attachevent ('on' + type, OBJ [type + FN]);
} Else
OBJ. addeventlistener (type, FN, false );
}
For example, add a page Click Event:

BIND (document, "click", function (){
Alert ("Hello, world !! ");
});

2) bind unbind () to the deletion event
the function parameters are the same as those of the BIND () function. copy Code the code is as follows: /**********************************
* Delete event binding
* @ Param OBJ: element
* @ Param type: event name. Do not add "on ". for example, "click" instead of "onclick"
* @ Param FN: event processing functions
********************************** **/
function unbind (OBJ, type, FN) {
If (obj. detachevent) {
obj. detachevent ('on' + type, OBJ [type + FN]);
OBJ [type + FN] = NULL;
}else
obj. removeeventlistener (type, FN, false);
}

3) obtain the calculation style of the element
The calculated style is also called the final style, that is, the final style of the element. Ie uses the currentstyle attribute of the element, while other browsers use the standard document. defaultview. getcomputedstyle () method.Copy codeThe Code is as follows :/************************************
* Returns the calculation style of the element.
* @ Param element: Element
* @ Param key: style name (camel)
************************************/
Function getstyle (element, key ){
// The parameter is incorrect.
If (typeof element! = "Object" | typeof key! = "String" | key = "")
Return false;

// Opacity
If (Key = "opacity "){
If (browser. ie ){
VaR F = element. filters;
If (F & F. length> 0 & F. Alpha ){
Return (F. Alpha. Opacity/100 );
}
Return 1.0;
}
Return document. defaultview. getcomputedstyle (element, null) ["opacity"];
}

// Floating
If (Key = "float "){
Key = (browser. ie? "Stylefloat": "cssfloat ");
}
If (typeof element. currentstyle! = "Undefined "){
Return element. currentstyle [Key];
} Else {
Return document. defaultview. getcomputedstyle (element, null) [Key];
}
}

The transparency mechanism of IE is different from that of other browsers. Here, Opacity is used to indicate transparency. Also, because float is a reserved word in Javascript, the browser escapes it. ie uses stylefloat, while others use cssfloat. Here, they are all float.

For example, obtaining transparencyCopy codeThe Code is as follows: var A = Document. getelementbyid ("test ");
VaR opacity = getstyle (a, "opacity ");

4) bind domready () to the DOM load completion event ()
Domready is different from window. onload. Window. onload is used to load all elements of the page, including images and videos. In general, we don't need to wait so long, but only need to use Dom.Copy codeThe Code is as follows :/************************************
* Domready
* @ Param FN: function to be executed
************************************/
Function domready (FN ){
// The parameter is incorrect.
If (typeof FN! = "Function ")
Return false;
If (typeof document. addeventlistener = "function") {// non-IE browser
Document. addeventlistener ("domcontentloaded", FN, false );
Return;
}
VaR _ this = arguments. callee;
If (_ this. Ready) // If the Dom has been loaded, directly execute
Return FN ();

If (! _ This. List) // create an array of functions to be executed
_ This. List = [];

_ This. List. Push (FN );

If (_ this. Done) return; // if it is detecting cyclically
(Function () {// cyclic Detection
_ This. Done = true;
Try {
Document.doc umentelement. doscroll ("Left ");
} Catch (error ){
SetTimeout (arguments. callee, 0 );
Return;
}
// After loading the Dom, execute all functions to be executed.
_ This. Ready = true;
For (VAR I = 0, L = _ this. List. length; I <L; I ++ ){
_ This. list [I] ();
}
})();
}

For example:Copy codeThe Code is as follows: domready (function (){
Alert ("dom loaded! ");
});