讲两件事: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 Array对象入门分析
Oct 30 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
vue实现前端分页完整代码
Jun 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执行速度全攻略(上)
2006/10/09 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
Vue watch响应数据实现方法解析
2020/07/10 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python中的异常处理简明介绍
2015/04/13 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
django教程如何自学
2020/07/31 Python
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
YII2 全局异常处理深入讲解
2021/03/24 PHP
《圆明园的毁灭》教学反思
2014/02/28 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
师范生见习自我总结
2015/06/23 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书