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 相关文章推荐
JQuery 选择器 xpath 语法应用
May 13 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
Python绘制组合图的示例
2020/09/18 Python
收款授权委托书
2014/10/02 职场文书
神农溪导游词
2015/02/11 职场文书
2016大一新生军训感言
2015/12/08 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android