解决使用attachEvent函数时,this指向被绑定的元素的问题的方法


Posted in Javascript onAugust 13, 2007

使用attachEvent对同一事件进行多次绑定,这是解决事件函数定义冲突的重要方法。但是在IE中,函数内的this指针并没有指向被绑定元素,而是function对象,在应用中,这是很难受的一件事,如果试图用局部变量传送元素,会因为闭包而引起内存泄漏。那么,我们应该如何解决这一难题呢?

   我给Function添加了原型方法“bindNode”,在这个方法里,根据传送过来的元素,进行全局性存储转换,然后返回经过封装的函数,使用call方法来进行属主转换。

<html>
<body>
<button id=btTest>test</button>
</body>
</html>
<script>
if(!document.all){
   HTMLElement.prototype.attachEvent=function(sType,foo){
       this.addEventListener(sType.slice(2),foo,false)
   }
}
Function.prototype.bindNode=function(oNode){
   var foo=this,iNodeItem

   //使用了全局数组__bindNodes,通过局部变量iNodeItem进行跨函数传值,如果直接传送oNode,也将造成闭包
   if(window.__bindNodes==null)
       __bindNodes=[]
   __bindNodes.push(oNode)
   iNodeItem=__bindNodes.length-1
   oNode=null
   return function(e){
       foo.call(__bindNodes[iNodeItem],e||event)
   }
}
abc()
function abc(){
   var bt=document.getElementById("btTest")
   bt.attachEvent("onclick",function(){

       //如果不经过bindNode处理,下面的结果将是undefined
       alert(this.tagName)
   }.bindNode(bt))
   bt=null
}
</script>

Javascript 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
js实现3D照片墙效果
Oct 28 Javascript
Track Image Loading效果代码分析
Aug 13 #Javascript
不错的JS中变量相关的细节分析
Aug 13 #Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 #Javascript
TopList标签和JavaScript结合两例
Aug 12 #Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 #Javascript
IE和Mozilla的兼容性汇总event
Aug 12 #Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 #Javascript
You might like
php daodb插入、更新与删除数据
2009/03/19 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
thinkphp分页集成实例
2017/07/24 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
JS日历 推荐
2006/12/03 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python+opencv实现动态物体追踪
2018/01/09 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
思想政治教育专业个人求职信范文
2013/12/20 职场文书
合作协议书模板2014
2014/09/26 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
工程部部长岗位职责
2015/02/12 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
Redis基本数据类型List常用操作命令
2022/06/01 Redis
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android