讲两件事: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代码
Sep 17 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
javascript回到顶部特效
2016/07/30 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
[00:16]热血竞技场
2019/03/06 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
python如何实现内容写在图片上
2018/03/23 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
公司前台接待岗位职责
2013/12/03 职场文书
银行服务感言
2014/03/01 职场文书
办公室副主任职责范本
2014/03/08 职场文书
校外活动方案
2014/08/28 职场文书
小浪底导游词
2015/02/12 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
2015年林业工作总结
2015/05/14 职场文书
高二化学教学反思
2016/02/22 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python