JavaScript学习笔记Black.Caffeine09.11.28
2023-06-13 09:14:14 时间
1.之前写的一直都是分散的函数,用到什么功能,就写什么函数,觉得不够整洁,所以这次写的是封装的类,用起来还不错,但是传递参数的时候遇到了不少问题,所以,查阅了很多资料,总结如下:
1)动态绑定事件问题:
需要将onclick事件绑定到对象上,比如列表项。需要用到addEventListener或者attachEvent,用于吧函数操作添加到事件中去,而不是覆盖,但是,attachEvent不支持FF,FF只能用addEventListener。so,就需要一个函数,把它们俩给综合起来,于是乎,这个函数诞生了:
复制代码代码如下:
1)动态绑定事件问题:
需要将onclick事件绑定到对象上,比如列表项。需要用到addEventListener或者attachEvent,用于吧函数操作添加到事件中去,而不是覆盖,但是,attachEvent不支持FF,FF只能用addEventListener。so,就需要一个函数,把它们俩给综合起来,于是乎,这个函数诞生了:
functionaddEventHandler(oTarget,sEventType,fnHandler)
{
if(oTarget.addEventListener)
{oTarget.addEventListener(sEventType,fnHandler,false);}
elseif(oTarget.attachEvent)
{oTarget.attachEvent("on"+sEventType,fnHandler);}
else{oTarget["on"+sEventType]=fnHandler;}
}
2)传递this参数问题:
由于我吧函数和属性都封装到了一个类里面,所以在绑定onclick之类的事件是,就会产生一个问题,比如,addEventHandler(this.elems[i],"click",this.Move);,这样就出错了,因为在onclick事件发生的时候,调用的this就不是指向这个封装的类了,于是乎,就需要用到apply()了~——应用某一对象的一个方法,用另一个对象替换当前对象。具体格式我就不用说了,网上一大堆~函数:
varBind=function(object,func){
varargs=Array.prototype.slice.call(arguments).slice(2);
returnfunction(){
returnfunc.apply(object,args);
}
}
调用:
this._fnMove=Bind(this,this.move,i);//this.move是我定义的一个成员函数,封装在类中
//this.elems[i].onclick=this._fnMove;//吧上面那句话换成这句话也是可以的,只不过,onclick事件就被替换为this._fnMove,而不是添加this._fnMove进去
addEventHandler(this.elems[i],"click",this._fnMove);
这样就OK了~
PS.call()也是基本相同的功能,但具体参数不一样
2.setInterval问题
1)与setTimeout的区别
在一般情况下,setTimeout仅执行一次,(当然,如果在一个函数里反复调用setTimeout,就可以重复执行了)而setInterval是可以重复执行的,直到clearIntercal()
2)在IE下不兼容问题
这个问题折磨了我50%的时间,哦买噶,以后是不是要半生都浪费在跟IE干仗上了。。。
本来,在chrome,ff,safari上都运行的很好,我相当激动,以至于遗忘了IE。。。后来在IE上一试,结果,完了,修改,google(此处为动词,嘿嘿),基本上花了大半天时间吧,终于搞定。之前,语句是这样的:this.timer=setInterval(this.unfold,5,this.divs[index],this);结果在IE下完全不好使。最后,在某位大侠的文章里面看到如下描述:在IE下,setTimeout和setInterval是不支持参数传递的.问题很快就解决掉了,果然是我太菜了~
解决问题的函数如下:
varmySetInterval=setInterval;
window.setInterval=function(callback,interval)
{
varargs=Array.prototype.slice.call(arguments,2);
functioncallFn(){callback.apply(null,args);}
returnmySetInterval(callFn,interval);
}
varmySetTimeOut=setTimeout;//修改setInterval
window.setTimeout=function(callback,timeout)
{
varargs=Array.prototype.slice.call(arguments,2);
functioncallFn(){callback.apply(null,args);}
然后使用window.setTimeout或window.setInterval调用就可以了~
我的语句修改如下:
this.timer=window.setInterval(this.unfold,5,this.divs[index],this);//其中,this.divs[index],this是传递的两个参数
再次谢谢那位大侠,虽然他不认识我~
目前,在IE中还有点排版的小问题,继续学习~全力兔子!
相关文章
- javaScript学习笔记(一)js基础
- JavaScript笔记(13)
- JavaScript笔记(17)
- 关于Java&JavaScript中(伪)Stream式API对比的一些笔记
- JavaScript学习总结(九)——Javascript面向(基于)对象编程详解编程语言
- JavaScript学习笔记(五)
- JavaScript学习笔记(六)
- JavaScript学习笔记(十)
- JavaScript学习笔记(十一)
- JavaScript高级程序设计错误处理与调试学习笔记
- Javascript学习笔记-详解in运算符
- Javascript学习笔记delete运算符
- javascript权威指南学习笔记之null和undefined
- javascript学习基础笔记之DOM对象操作
- javascript学习笔记(三)String字符串类型介绍
- javascript学习笔记(十二)RegExp类型介绍
- JavaScript高级程序设计阅读笔记(十六)javascript检测浏览器和操作系统-detect.js
- JavaScript高级程序设计(第3版)学习笔记12js正则表达式
- JavaScript高级程序设计(第3版)学习笔记13ECMAScript5新特性
- javascript简单性能问题及学习笔记
- javascript学习笔记--数字格式类型
- Javascript学习笔记之数组的构造函数
- JavaScript学习笔记之操作符(续)
- JavaScript学习笔记之JS事件对象
- JavaScript学习笔记之内置对象