JavaScript study notes Black.Caffeine 09.11.28_Basic knowledge

1. I have always written scattered functions before. I just write whatever function is used. I feel that it is not neat enough, so this time I wrote an encapsulated class. It is not bad to use, but I encountered a lot of problems when passing parameters. Problem, so I consulted a lot of information and summarized it as follows:
1) Dynamic binding event problem:
The onclick event needs to be bound to an object, such as a list item. You need to use addEventListener or attachEvent to add function operations to events instead of overwriting them. However, attachEvent does not support FF, and FF can only use addEventListener. So, we need a function to combine the two, so this function was born:

Copy code The code is as follows :

function addEventHandler(oTarget, sEventType, fnHandler)
{
if(oTarget.addEventListener)
{oTarget.addEventListener(sEventType, fnHandler, false);}
else if(oTarget.attachEvent)
{oTarget.attachEvent('on' sEventType, fnHandler);}
else{oTarget['on' sEventType] = fnHandler;}
}

2) Problem with passing this parameter:
Since I have encapsulated functions and attributes into a class, a problem will arise when binding events such as onclick, for example, addEventHandler(this. elems[i],"click",this.Move);, this will go wrong, because when the onclick event occurs, the this called does not point to this encapsulated class, so you need to use apply() ~——Apply a method of an object and replace the current object with another object. I don’t need to mention the specific format, there are a lot of functions on the Internet:

Copy code The code is as follows:

var Bind = function(object,func){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
return func.apply (object,args);
                                                                                                                                   ; A member function defined, encapsulated in the class
//this.elems[i].onclick=this._fnMove;//It is also possible to replace the above sentence with this sentence, but the onclick event Replaced with this._fnMove instead of adding this._fnMove
addEventHandler(this.elems[i],"click",this._fnMove);

This is OK~
PS.call( ) are basically the same function, but the specific parameters are different
2.setInterval problem
1) The difference with setTimeout
In general, setTimeout is only executed once, (of course, if it is repeated in a function Call setTimeout and it can be executed repeatedly) and setInterval can be executed repeatedly until clearIntercal()
2) Incompatibility problem under IE
This problem tortured me 50% of the time, oh buy it, in the future Do you want to waste half your life fighting IE? . .
Originally, it ran very well on chrome, ff, and safari. I was so excited that I forgot about IE. . . Later, I tried it on IE, and it turned out that it was finished. I modified it and Googled it (verb here, hehe). It basically took me most of the day and finally got it done. Before, the statement was like this: this.timer=setInterval(this.unfold,5,this.divs[index],this); The result was completely unusable under IE. Finally, I saw the following description in an article by a hero: Under IE, setTimeout and setInterval do not support parameter passing. The problem was quickly solved. It turned out that I was too good~
Solved the problem The function is as follows:




Copy code

The code is as follows: var mySetInterval = setInterval; window .setInterval = function(callback, interval) {

var args = Array.prototype.slice.call(arguments, 2);

function callFn(){callback.apply(null, args);}
return mySetInterval(callFn, interval);
}

var mySetTimeOut = setTimeout; //Modify setInterval
window.setTimeout = function(callback, timeout)
{
var args = Array.prototype.slice.call(arguments, 2);
function callFn(){callback.apply(null, args);}


Then use window.setTimeout or window Just call .setInterval~
My statement is modified as follows:
this.timer=window.setInterval(this.unfold,5,this.divs[index],this); //Among them, this.divs [index], this is the two parameters passed
Thank you again for that hero, although he doesn’t know me~

Currently, there are still some small layout problems in IE, continue to learn~Full Rabbit!