解决使用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 相关文章推荐
javascript中验证大写字母、数字和中文
Jan 15 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
原生js实现日期联动
Jan 12 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
原生JS中应该禁止出现的写法
May 05 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
一个SQL管理员的web接口
2006/10/09 PHP
PHP 选项及相关信息函数库
2006/12/04 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
angularJS开发注意事项
2018/05/26 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
python和php学习哪个更有发展
2020/06/17 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
详解pandas映射与数据转换
2021/01/22 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
教育学专业毕业生的自我评价
2013/11/21 职场文书
2015年党总支工作总结
2015/05/25 职场文书
难以忽视的真相观后感
2015/06/05 职场文书