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打印纸函数代码(递归)
Jun 18 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
JavaScript控制台的更多功能
Apr 28 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
第七节 类的静态成员 [7]
2006/10/09 PHP
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python 中的with关键字使用详解
2016/09/11 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
如何对python的字典进行排序
2020/06/19 Python
分享一个python的aes加密代码
2020/12/22 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
影视制作岗位职责
2013/12/04 职场文书
新书吧创业计划书
2014/01/31 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
租车协议书范本
2014/04/22 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
Python装饰器详细介绍
2022/03/25 Python
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS