4 cross-browser essential functions under javascript_javascript skills

The following four functions are part of it.

First we need to add a browser detection script:

Copy the code The code is as follows :

/**************************************
* Detect browser
****** *******************************/
var user = navigator.userAgent;
var browser = {};
browser.opera = user.indexOf("Opera ") > -1 && typeof window.opera == "object";
browser.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) Add event binding bind()
Everyone must know this. The event binding function of IE is attachEvent; while Firefox and Safari are addEventListener; Opera supports both. Encapsulation is done below.

Copy code The code is as follows:

/************************************
* Add event binding
* @param obj: The element to which the event will be bound
* @param type: event name. Do not add "on". For example: "click" instead of "onclick".
* @param fn: event handling 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) Delete event binding unbind()
and bind() have the same function parameters but opposite functions.

Copy code The code is as follows:

/**************************************
* Delete event binding
* @param obj: Element to delete event
* @param type: event name. Do not add "on". For example: "click" instead of "onclick"
* @param fn: event handling function
******************** ****************/
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) Get the calculated style of the element
The calculated style is also It's called the final style, which is the final style of the element. IE uses the element's currentStyle property, while other browsers use the standard document.defaultView.getComputedStyle() method.

Copy code The code is as follows:

/**************************************
* Returns the calculated style of the element
* @param element : Element
* @param key : Style name (Camel)
************************************ ****/
function getStyle(element, key) {
// Incorrect parameter
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"];
}

// float
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 represent transparency. Also, since float is a reserved word in JavaScript, the browser escapes it. IE uses styleFloat, and others use cssFloat. Here they are unified as float.

For example: Get transparency

Copy code The code is as follows:

var a = document.getElementById("test");
var opacity = getStyle(a, "opacity");

4) DOM loaded Event binding domready()
domready is different from window.onload. window.onload means that all elements of the page have been loaded, including images, videos and other things. Normally we don't need to wait that long, we just need the DOM to be available.

Copy code The code is as follows:

/**************************************
* domready
* @param fn: to be executed Function
*****************************************/
function domready(fn) {
//Incorrect parameter
if(typeof fn != "function")
return false;
if(typeof document.addEventListener == "function") { // Non-IE browsers
document.addEventListener("DOMContentLoaded", fn, false);
return;
}
var _this = arguments.callee;
if(_this.ready) // If the DOM has been loaded, execute directly
return fn();

if(!_this.list) // Create an array of functions to be executed
_this.list = [];

_this.list.push(fn);

if (_this.done) return; // If loop detection is in progress, return
(function() { // Loop detection
_this .done = true;
try {
document.documentElement.doScroll("left");
} catch(error) {
setTimeout(arguments.callee, 0);
return;
}
// DOM is loaded, execute all functions to be executed
_this.ready = true;
for (var i=0, l=_this.list.length; i_this.list[i]();
}
})();
}

For example:

Copy code The code is as follows:

domready(function(){
alert("DOM loaded!");
});