Native JavaScript compatibility Test instance

Native JavaScript compatibility: Currentstyle, ScrollTop, event, and binding event IE binding events for the attachevent/detachevent and so on compatibility test examples, interested friends can refer to ha

1. Get the Width,border color of the style sheet CSS (not between rows) is mainly ie6-7 support Currentstyle, standard browser support getComputedStyle;

Instances: Encapsulating functions

Copy Code code as follows:


function GetStyle (obj,name) {


if (obj.currentstyle) {


return obj.currentstyle[name];


}


else{


return getComputedStyle (obj,false) [name];


}


}

Call: GetStyle (' color ');

2. Get the scrolling distance
DOCUMENT.BODY.SCROLLTOP applies to standard browsers
Document.documentElement.scrollTop applies to the following versions of IE9
Compatibility can be written like this
var top = Document.body.scrollTop | Document.documentElement.scrollTop;

3. Event objects
Standard Browser: Event object as an argument to an event function
IE low version needs to be directly with event object (global)

Copy Code code as follows:


function (EV) {


var event = EV | | Event


}

Now the event is the object of events.

4. Binding Event IE Binding event is attachevent/detachevent (bound or canceled); standard browser addeventlistener/removeeventlistener (bind or cancel)
The following is an event-bound or canceled parameter, in which the function cannot be an anonymous function or it will not be canceled.
How to use AddEventListener:

Target.addeventlistener (type, listener, usecapture);

Target: Documentation node, document, window, or XMLHttpRequest.
Type: String, event name, excluding "on", such as "click", "MouseOver", "KeyDown", and so on.
Listener: Implements a EventListener interface or a function in JavaScript.
Usecapture: Use capture, generally false. For example: document.getElementById ("Testtext"). AddEventListener ("KeyDown", function (event) {alert (event.keycode);}, False );

In IE:

Target.attachevent (type, listener);
Target: Documentation node, document, window, or XMLHttpRequest.
Type: String, event name, including "on", such as "onclick", "onmouseover", "onkeydown", and so on.
Listener: Implements a EventListener interface or a function in JavaScript. For example: document.getElementById ("TXT"). attachevent ("onclick", function (event) {alert (event.keycode);});

Encapsulation function for event bindings:

Copy Code code as follows:


function Addevent (OBJ,EV,FN) {


if (obj.attachevent) {


obj.attachevent (' on ' +ev,fn)


}


else{


obj.addeventlistener (EV, FN, false);





}


}

Such a wrapper function if you use this in the binding event FN function, beware of this as window (only IE low version has this bug) is not obj;

Copy Code code as follows:


addevent (document, ' click ', function (EV) {





var ev=ev| | window.event;


var target = ev.target| | Ev.srcelement; Get the event source primarily handle IE low version This is the bug
for Windows

alert (target)


});

Unbind event fn is the function name

Copy Code code as follows:


function Removeevent (OBJ,EV,FN) {


if (obj.detachevent) {


obj.detachevent (' on ' +ev,fn)


}


else{


obj.removeeventlistener (EV, FN, false);





}


}

5.ajax
AJAX create XMLHTTP object Standard Edition browser and IE low version incompatible
Standard Edition Create XMLHTTP objects:

Copy Code code as follows:


//1. Create Object


if (window. XMLHttpRequest)


{


var oajax=new xmlhttprequest ();//Standard browser


}


Else


{


var oajax=new activexobject ("Microsoft.XMLHTTP");//ie low version


}


alert (Oajax);

6. Cancel the default event
The default event cancellation in JS is mainly two kinds of return false and Preventdefault
Cancel default event return False is compatible with any browser but if you encounter an event binding AddEventListener will cancel the default event
Example of canceling the default right key event:

Copy Code code as follows:


document.addeventlistener (' ContextMenu ', function (EV) {


Ev.preventdefault ();


}))


Document.oncontextmenu = function () {


return false;


}

The difference between 7.call and apply
Call, apply can invoke a function
For example

Copy Code code as follows:


function Show () {


alert (This)


}


//show (); Pop-up window


//show.call (); Eject Windwo


//show.call (this)//popup window


//show.call (5); Pop 5;


Show.call (this,5); Pop-up window

Call (This,arg1,arg2,...) You can see that the parameter in call is mainly referring to an event object. Later parameters are parameters used in functions
Use call and apply to mainly modify this, functional and ordinary function is not much difference
Apply (this,arguments) is mainly used for parameter uncertainties
8, the DOM obtains the child node children and ChildNodes
Children can only take the first layer must be a label node
For example:

Copy Code code as follows:


<span><a href= "#" > Text 1</a></span>


<span><a href= "#" > Text 2</a></span>

Children[0] This can only be taken to the first span if you want to get the first a label children[0].children[0], so that children length is only 2;
ChildNodes in the upper version of the above text on Firefox Google is length is 5, in IE low version (6-8) length is 4.