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 相关文章推荐
js sort 二维数组排序的用法小结
Jan 24 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
javascript学习之json入门
Dec 22 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
js回调函数仿360开机
2019/12/26 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
python 格式化输出百分号的方法
2019/01/20 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
django使用xadmin的全局配置详解
2019/11/15 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
简单的辞职信范文
2014/01/18 职场文书
企业军训感想
2014/02/07 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
绿色出行口号
2014/06/18 职场文书
师德师风自我评价范文
2014/09/11 职场文书
作文之亲情600字
2019/09/23 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python