解决使用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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
vue2项目使用sass的示例代码
Jun 28 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
万能的php分页类
2017/07/06 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python多线程下载文件的方法
2015/07/10 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
python Kmeans算法原理深入解析
2019/08/23 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
Footshop法国:购买运动鞋
2020/01/19 全球购物
《口技》教学反思
2014/02/21 职场文书
小学教师师德承诺书
2014/05/23 职场文书
法人代表任命书范本
2014/06/05 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
面试自我评价范文
2014/09/17 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
小学同学聚会感言
2015/07/30 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android