Examples of native javascript compatibility testing

1. Get the width, border color and other css (not line) in the style table is mainly IE6-7 support currentStyle, standard browser support getComputedStyle;

Instance: encapsulation FunctionCopy codeThe Code is 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 scroll distance
Document. body. scrollTop for standard browsers
Document.doc umentElement. scrollTop applies to versions earlier than IE9
Compatibility can be written in this way
Var top = document. body. scrollTop | document.doc umentElement. scrollTop;

3. event object
Standard browser: The event object is used as the parameter of the event function.
In earlier versions of IE, the event object (global) must be used directly)Copy codeThe Code is as follows: function (ev ){
Var event = ev | event;
}

Now the event is used as the event object.

4. The binding event of the binding event IE is attachEvent/detachEvent (binding or canceling); the standard browser addEventListener/removeEventListener (binding or canceling)
The following are the parameters for event binding or cancellation. In event binding, the function cannot be an anonymous function. Otherwise, the function cannot be canceled.
How to Use addEventListener:

Target. addEventListener (type, listener, useCapture );

Target: document node, document, window, or XMLHttpRequest.
Type: String, event name, excluding "on", such as "click", "mouseover", and "keydown.
Listener: implements the EventListener interface or functions in JavaScript.
UseCapture: whether to use capture. Generally, false is used. For example, document. getElementById ("testText"). addEventListener ("keydown", function (event) {alert (event. keyCode) ;}, false );

IE:

Target. attachEvent (type, listener );
Target: document node, document, window, or XMLHttpRequest.
Type: String, event name, including "on", such as "onclick", "onmouseover", and "onkeydown.
Listener: implements the EventListener interface or functions in JavaScript. For example, document. getElementById ("txt"). attachEvent ("onclick", function (event) {alert (event. keyCode );});

Encapsulation function bound to the event:Copy codeThe Code is as follows: function addEvent (obj, ev, fn ){
If (obj. attachEvent ){
Obj. attachEvent ('on' + ev, fn)
}
Else {
Obj. addEventListener (ev, fn, false );

}
}

If this encapsulation function is used in the fn function of the binding event, you need to be aware that this is window (only earlier versions of IE have this bug) and not obj;Copy codeThe Code is as follows: addEvent (document, 'click', function (ev ){

Var ev = ev | window. event;
Var target = ev.tar get | ev. srcElement; // obtain the event source to handle bugs where earlier IE versions are windows.
Alert (target)
});

The unbound event fn is the function name.Copy codeThe Code is as follows: function removeEvent (obj, ev, fn ){
If (obj. detachEvent ){
Obj. detachEvent ('on' + ev, fn)
}
Else {
Obj. removeEventListener (ev, fn, false );

}
}

5. ajax
The standard version of XMLHttp object created by Ajax is incompatible with earlier IE versions.
Create an XMLHttp object for Standard Edition:Copy codeThe Code is as follows: // 1. Create an object
If (window. XMLHttpRequest)
{
Var oAjax = new XMLHttpRequest (); // standard browser
}
Else
{
Var oAjax = new ActiveXObject ("Microsoft. XMLHTTP"); // earlier version of IE
}
Alert (oAjax );

6. Cancel default events
In js, the default event cancellation mainly involves two types of return false and preventDefault.
To cancel the default event, return false is compatible with any browser. However, if the addEventListener bound to the event is canceled, the default event cannot be canceled.
Example of canceling the default right-click event:Copy codeThe Code is as follows: document. addEventListener ('textmenu ', function (ev ){
Ev. preventDefault ();
}))
Document. oncontextmenu = function (){
Return false;
}

7. Difference between call and apply
Call and apply can call functions.
For exampleCopy codeThe Code is as follows: function show (){
Alert (this)
}
// Show (); the window is displayed.
// Show. call ();
// Show. call (this) // The window is displayed.
// Show. call (5); // 5 is displayed;
Show. call (this, 5); // The window is displayed.

Call (this, arg1, arg2,...) We can see that the parameter this in the call mainly refers to the parameter used in the function after the event object
Call and apply are mainly used to modify this. There is no major difference between the function and common function.
Apply (this, arguments) is mainly used for parameters that are not specified.
8. DOM obtains the children and childNodes subnodes.
Children can only obtain the first layer of a subnode and must be a label node.
For example:Copy codeThe Code is as follows: <span> <a href = "#"> text 1 </a> </span>
<Span> <a href = "#"> text 2 </a> </span>

Children [0] can only get the first span. If you want to get the first a label children [0]. children [0], the length of children is only 2;
ChildNodes will calculate the above text in the high version. on Firefox Google, the length is 5; on IE earlier versions (6-8), the length is 4.