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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
Angular短信模板校验代码
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
基于mysql的bbs设计(二)
2006/10/09 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php类的定义与继承用法实例
2015/07/07 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue之延时刷新实例
2019/11/14 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
Python中用altzone()方法处理时区的教程
2015/05/22 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python实现的建造者模式示例
2018/08/06 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
python实现门限回归方式
2020/02/29 Python
Python打印不合法的文件名
2020/07/31 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
法国体育用品商店:GO Sport
2019/10/23 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
四年大学自我鉴定
2014/02/17 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
经典祝酒词大全
2015/08/12 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android