讲两件事: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页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
Node.js+Express配置入门教程
May 19 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
小程序实现订单倒计时功能
Apr 23 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实现删除非站内外部链接实例代码
2014/06/17 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
在vue组件中使用axios的方法
2018/03/16 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
Python常见工厂函数用法示例
2018/03/21 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
师范生个人推荐信
2013/11/29 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
文员求职信
2014/07/15 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android