JavaScript 学习笔记 Black.Caffeine 09.11.28


Posted in Javascript onNovember 30, 2009

1. 之前写的一直都是分散的函数,用到什么功能,就写什么函数,觉得不够整洁,所以这次写的是封装的类,用起来还不错,但是传递参数的时候遇到了不少问题,所以,查阅了很多资料,总结如下:
1)动态绑定事件问题:
需要将onclick事件绑定到对象上,比如列表项。需要用到addEventListener或者attachEvent,用于吧函数操作添加到事件中去,而不是覆盖,但是,attachEvent不支持FF,FF只能用addEventListener。so,就需要一个函数,把它们俩给综合起来,于是乎,这个函数诞生了:

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)传递this参数问题:
由于我吧函数和属性都封装到了一个类里面,所以在绑定onclick之类的事件是,就会产生一个问题,比如,addEventHandler(this.elems[i],"click",this.Move);,这样就出错了,因为在onclick事件发生的时候,调用的this就不是指向这个封装的类了,于是乎,就需要用到apply()了~——应用某一对象的一个方法,用另一个对象替换当前对象。具体格式我就不用说了,网上一大堆~函数:
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是我定义的一个成员函数,封装在类中
//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是不支持参数传递的.问题很快就解决掉了,果然是我太菜了~
解决问题的函数如下:
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; //修改setInterval 
window.setTimeout = function(callback, timeout) 
{ 
var args = Array.prototype.slice.call(arguments, 2); 
function callFn(){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 相关文章推荐
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
React中的refs的使用教程
Feb 13 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
vue实现表单录入小案例
Sep 27 Javascript
Ruffy javascript 学习笔记
Nov 30 #Javascript
jquery 分页控件实现代码
Nov 30 #Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 #Javascript
Aptana调试javascript图解教程
Nov 30 #Javascript
jQuery chili图片远处放大插件
Nov 30 #Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 #Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 #Javascript
You might like
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
实例浅析js的this
2016/12/11 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Python实现读取并保存文件的类
2017/05/11 Python
一份python入门应该看的学习资料
2018/04/11 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python实发邮件实例详解
2019/11/11 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
python中uuid模块实例浅析
2020/12/29 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
公司收款委托书范本
2014/09/20 职场文书
元宵节晚会主持词
2015/07/01 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
详解SQL的窗口函数
2022/04/21 Oracle