JavaScript study notes Black. Caffeine 09.11.28

Source: Internet
Author: User

1. all the previously written functions have been scattered. If you use any function, you can write any function that is not neat enough. Therefore, this write is an encapsulated class, which is not bad to use, however, many problems have been encountered when passing parameters. Therefore, I have read a lot of information and summarized it as follows:
1) dynamic binding event:
You need to bind the onclick event to an object, such as a list item. You need to use addEventListener or attachEvent to add the function operation to the event instead of overwriting. However, attachEvent does not support FF, and FF can only use addEventListener. So, we need a function to combine them. Thus, this function was born:
Copy codeThe 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) question about passing this parameter:
Because my functions and attributes are encapsulated in a class, events such as onclick binding may cause a problem, for example, addEventHandler (this. elems [I], "click", this. move); in this case, an error occurs, because when the onclick event occurs, the called this does not point to the encapsulated class. Therefore, apply () is required ~ -- Use a method of an object to replace the current object with another object. I don't need to mention the specific format. There are a lot of online content ~ Function:
Copy codeThe 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 );

This. _ fnMove = Bind (this, this. move, I); // this. move is a member function defined by me and encapsulated in the class.
// This. elems [I]. onclick = this. _ fnMove; // you can replace the above sentence with this sentence, but the onclick event is replaced with this. _ fnMove, instead of adding this. _ fnMove in
AddEventHandler (this. elems [I], "click", this. _ fnMove );
So OK ~
PS. call () is also basically the same function, but the specific parameters are different
2. setInterval
1) difference with setTimeout
In general, setTimeout is executed only once (of course, if you call setTimeout repeatedly in a function, you can execute it again) and setInterval can be executed repeatedly until clearIntercal ()
2) compatibility issues in IE
I am suffering from this problem for 50% of the time. If I buy a license, will it be a waste of my work with IE in the future...
Originally, chrome, ff, and safari run very well. I was so excited that I forgot IE... Later, I tried it on IE, and the result was over, modified, and google (the verb here, ). It took about half a day and finally got it done. Previously, the statement was like this: this. timer = setInterval (this. unfold, 5, this. divs [index], this); the result is not good in IE. Finally, I can see the following description in a hero's article: in IE, setTimeout and setInterval do not support parameter passing. The problem was quickly solved. It was really amazing ~
The function to solve the problem is as follows:
Copy codeThe 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 );}

You can call window. setTimeout or window. setInterval ~
Modify the statement as follows:
This. timer = window. setInterval (this. unfold, 5, this. divs [index], this); // Where, this. divs [index]. this is the two passed parameters.
Thank you again, though he doesn't know me ~
At present, there are some small typographical issues in IE. Continue to learn ~ Rabbit!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.