讲两件事: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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Python中的生成器和yield详细介绍
2015/01/09 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
Python新手学习标准库模块命名
2020/05/29 Python
Python collections模块的使用方法
2020/10/09 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
考博专家推荐信模板
2013/12/02 职场文书
给校长的建议书300字
2014/05/16 职场文书
初中政治教学工作总结
2015/08/13 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
Opencv实现二维直方图的计算及绘制
2021/07/21 Python