讲两件事: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+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
js获取class的所有元素
Mar 28 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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脚本的10个技巧(5)
2006/10/09 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP线程的内存回收问题
2016/07/08 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
总经理职责
2013/12/22 职场文书
C++程序员求职信范文
2014/04/14 职场文书
实验心得体会
2014/09/05 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python