解决使用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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
python访问sqlserver示例
2014/02/10 Python
编写简单的Python程序来判断文本的语种
2015/04/07 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python2 与python3的print区别小结
2018/01/16 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
快速查找Python安装路径方法
2020/02/06 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
python 代码运行时间获取方式详解
2020/09/18 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
后勤工作职责
2013/12/22 职场文书
物业管理工作方案
2014/05/10 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers