Native javascript compatibility test example_javascript skills

1. Get the css such as width and border color in the style sheet (not between lines). Mainly IE6-7 supports currentStyle, and standard browsers support getComputedStyle;

example: encapsulated function

Copy code The 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 scrolling distance
document.body.scrollTop is suitable for standard browsers
document.documentElement.scrollTop is suitable for versions below IE9
Compatibility can be written like this
var top = document.body.scrollTop | document.documentElement.scrollTop;

3. Event object
Standard browser: event object as parameter of event function
Lower versions of IE need to use the event object (global) directly

Copy the code The code is as follows:

function (ev) {
var event = ev || event;
}

Now event is used as the event object

4. Binding of event IE Define the event as attachEvent/detachEvent (binding or cancellation); standard browser addEventListener/removeEventListener (binding or cancellation)
The following are the parameters for event binding or cancellation. In event binding, the function cannot be an anonymous function, otherwise it will be cancelled. Don’t forget 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", "keydown", etc.
listener: implements the EventListener interface or a function in JavaScript.
useCapture: Whether to use capture, usually false. For example: document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

In IE:

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

Encapsulation function of event binding:

Copy code The 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 is used in the bound event fn function, you need to be careful that this is window (only lower versions of IE have this bug), not obj;

Copy code The code is as follows:

addEvent(document,'click',function(ev){

var ev =ev||window.event;
var target = ev.target||ev.srcElement; // Obtaining the event source mainly deals with IE low version. This is a bug in window
alert(target)
}) ;

The binding cancellation event fn is the function name

Copy the code The 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
Ajax creates XMLHttp object standard version browser and IE Lower versions are not compatible with the
standard version to create XMLHttp objects:

Copy code The code is as follows:

//1. Create object
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();//Standard browser
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE lower version
}
alert(oAjax);

6. Cancel the default event
The default event cancellation in js is mainly two types: return false and preventDefault
The return false in the default event is compatible with any browser, but if it encounters the event-bound addEventListener, it will be canceled Example of canceling the default right-click event without losing the default event:

Copy the code The code is as follows:

document.addEventListener('contextmenu',function(ev){
ev.preventDefault();
}))
document.oncontextmenu = function(){
return false;
}

7. The difference between call and apply
call and apply can call functions
for example

Copy code The code is as follows:

function show(){
alert(this)
}
//show(); Pop up window
//show .call(); pop up window
//show.call(this) //pop up window
//show.call(5); //pop up 5;
show.call(this,5) ; //Pop up window

call(this, arg1, arg2,...) It can be seen that the parameter this in call mainly refers to the event object and the subsequent parameters are parameters used in the function
Using call and apply are mainly used to modify this. There is not much difference in function from ordinary functions
apply(this,arguments) is mainly used when the parameters are uncertain
8. DOM acquisition subtitles Nodes children and childNodes
Children can only obtain child nodes by taking the first layer and must be label nodes
For example:

Copy code The code is as follows:

Text 1
Text 2

children[0] This can only get the first span if you want to get the first a tag children[0].children[0], so the length of children is only 2;
childNodes will count empty text in higher versions. On Firefox and Google, the length above is 5; in lower IE versions (6-8) The length is 4.