讲两件事: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 相关文章推荐
jQuery调用WebService的实现代码
Jun 19 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 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/04/06 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
化学相关工作求职信
2013/10/02 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
网聊搭讪开场白
2015/05/28 职场文书
运动员代表致辞
2015/07/29 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript