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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
九种原生js动画效果
Nov 11 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
原生js实现日期选择插件
May 21 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
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 socket实现的聊天室代码分享
2014/08/16 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
详解vue 组件注册
2020/11/20 Vue.js
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python3转换code128条形码的方法
2019/04/17 Python
Python控制Firefox方法总结
2019/06/03 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
大学自我鉴定范文
2013/12/26 职场文书
绩效工资分配方案
2014/01/18 职场文书
争做文明公民倡议书
2014/08/29 职场文书
皇城相府导游词
2015/02/06 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
如何使用SQL Server语句创建表
2022/04/12 SQL Server