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
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
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:
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;
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
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:
//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:
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
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:
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.