讲两件事: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实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
基于mysql的论坛(5)
2006/10/09 PHP
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
Python实现从URL地址提取文件名的方法
2015/05/15 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python3人脸识别的两种方法
2019/04/25 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
python性能测试工具locust的使用
2020/12/28 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
群众路线党员个人剖析材料
2014/10/08 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL