讲两件事: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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
JS input 数字验证代码
Jul 30 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 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递归函数返回值使用方法
2013/02/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python版本五子棋的实现代码
2018/12/11 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
浅谈Python协程
2020/06/17 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
2014年元旦促销活动方案
2014/02/22 职场文书
运动会800米加油稿
2014/02/22 职场文书
师德师风自查总结
2014/10/14 职场文书
学前班语言教学计划
2015/01/20 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
win10更新失败无限重启解决方法
2022/04/19 数码科技