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中出现乱码的处理心得
Dec 24 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
element-ui中按需引入的实现
2019/12/25 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python 动态加载的实现方法
2017/12/22 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
基于Django用户认证系统详解
2018/02/21 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
Python 3 判断2个字典相同
2019/08/06 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
陈欧的广告词
2014/03/18 职场文书
干部对照检查材料范文
2014/08/26 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
创业计划书之面包店
2019/09/17 职场文书