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 相关文章推荐
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
解决LayUI表单获取不到data的问题
Aug 20 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 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.NET的入门教程
2006/10/09 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP递归创建多级目录
2015/11/05 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python实现Floyd算法
2018/01/03 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
解决Python中回文数和质数的问题
2019/11/24 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
客服实习的个人自我鉴定
2013/10/20 职场文书
大学生简短的自我评价
2014/09/12 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
企业法人授权委托书
2014/09/25 职场文书
武侯祠导游词
2015/02/04 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
师德师风培训感言
2015/08/03 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
Django migrate报错的解决方案
2021/05/20 Python