讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别


Posted in Javascript onApril 12, 2007

第一件事情.
this 指钟是JavaScript语言中的一个特殊指钟,他在代码运行时,指向调用this语句的当前对象.
如果是事件绑定函数,则指向被绑定的元素本身.
<script type="text/javascript">
//by Go_Rush(阿舜) from  http://ashun.cnblogs.com/
alert(this===window)  //true  直
接调用的时候,指向window本身
var gorush={
    f:function(){
        alert(this===gorush)    //true
    }
}
gorush.f()   //指向 gorush对象
document.onclick=function(){   
    alert(this===document)  //true ,指向 document
}
/*
element.onclick=function(){
    alert(this===element)     //true
}
*/
</script>
特别要值得注意的是,当多个对象嵌套的时候, this 是指向最近调用它的那个对象的
obj1={
    obj2:{
        f:function(){
            alert(this===obj1.obj2)  //这里 this 并不是指向 obj1的哦。
        }
    }
}
obj1.obj2.f()
再举一个非常容易出错的例子,  点这里看相关链接
<script type="text/javascript">
//by Go_Rush from http://ashun.cnblogs.com/
//以下gorush1中 this的用法是错误的,这个错误10个程序员6个犯
var gorush1={
    showMsg:function(){alert("hello,world")},
    doAjax:function(){
        new Ajax.Request("index.php",{onSuccess:function(){
            this.showMsg()
        }})
    }         
}
//gorush2中的才是对的
var gorush2={
    showMsg:function(){alert("hello,world")},
    doAjax:function(){
        var self=this;    //备份 gorush2对象 
        new Ajax.Request("index.php",{onSuccess:function(){
            self.showMsg()
        }})
    }         
}
</script>

第二件事情:
   闲话不多说,先上碟小菜.
<script type="text/javascript">
var btn=null
window.onload=function(){
    btn=document.getElementById("btn")    
    if (window.attachEvent) btn.attachEvent("onclick",gorush);
    if (window.addEventListener) btn.addEventListener("click",gorush,false)
}
function gorush(){
    if (this===window) alert("this==window")   //ie6.0下,这句会执行
    if (this===btn)        alert("this==btn")        //ff1.5下,  这句会执行
}
</script>
<input type="button" value="click me" id="btn">
真不明白为什么 ie 会这样搞,让人很郁闷啊,为什么把 this 指向 window呢?
解决方法:
1. 事件绑定的时候不要用 attachEvent, 可怜的我,当时就是用的prototype.js的Event.Observe方法
这样 element.onclick=function.....  这样在两个浏览器中 this 指钟都指向 element
2. 在处理函数 gorush中 用 getEvent()方法统一获取事件,然后在用 evt.srcElement || evt.target 获取 element对象

Javascript 相关文章推荐
关于JavaScript中string 的replace
Apr 12 Javascript
jquery indexOf使用方法
Aug 19 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
详谈javascript中的cookie
Jun 03 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 #Javascript
无语,javascript居然支持中文(unicode)编程!
Apr 12 #Javascript
几个高效,简洁的字符处理函数
Apr 12 #Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 #Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 #Javascript
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 #Javascript
FireFox中textNode分片的问题
Apr 10 #Javascript
You might like
PHP分页函数代码(简单实用型)
2010/12/02 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
jquery json 实例代码
2010/12/02 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
jquery 手势密码插件
2017/03/17 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
react路由配置方式详解
2017/08/07 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
小学母亲节活动总结
2015/02/10 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang