讲两件事: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 相关文章推荐
js对数字的格式化使用说明
Jan 12 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
jQuery实现跨域
Feb 03 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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
SONY SRF-M100的电路分析
2021/03/02 无线电
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP发送短信代码分享
2015/08/11 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
使用Python进行目录的对比方法
2018/11/01 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python各类经纬度转换的实例代码
2019/08/08 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
2014年清明节寄语
2014/04/03 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
五好家庭事迹材料
2014/12/20 职场文书
中国合伙人观后感
2015/06/02 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
tomcat下部署jenkins的方法
2022/05/06 Servers