讲两件事: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实现单行文字间歇向上滚动源代码
Jun 02 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
vue中watch和computed的区别与使用方法
Aug 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 str_pad 函数使用详解
2009/01/13 PHP
yii上传文件或图片实例
2014/04/01 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python实现KNN分类算法
2019/10/16 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
英国团购网站:Groupon英国
2017/11/28 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
如何查找网页漏洞
2016/06/22 面试题
AJax面试题
2014/11/25 面试题
政法学院毕业生求职信
2014/02/28 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
军事理论课感想
2015/08/11 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL