讲两件事: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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
angular.js分页代码的实例
Jul 27 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
JavaScript继承的三种方法实例
May 12 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函数
2006/10/09 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python求出0~100以内的所有素数
2018/01/23 Python
python实现简易通讯录修改版
2018/03/13 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
班班通校本培训方案
2014/03/12 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
安全生产协议书
2016/03/22 职场文书