讲两件事: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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
js表单验证实例讲解
Mar 31 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
深入分析javascript中console命令
Aug 14 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
Vue微信公众号网页分享的示例代码
May 28 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中使用PDF文档功能
2006/10/09 PHP
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python实现类继承实例
2014/07/04 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
计算机网络专业推荐信
2013/11/24 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
超市开店计划书
2014/04/26 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
礼貌问候语大全
2015/11/10 职场文书
2019年工作总结范文
2019/05/21 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python