IE6标签事件动态绑定导致崩溃

报错原因

前两天做一个用户列表的应用,右键用户头像弹出一个菜单选项。这应该是JavaScript最容易实现的一个功能的,使用JavaScript事件即可实现。但是测试的时候,其它浏览器都没有问题,唯独IE6报错:

full

【国内直连ChatGPT 29元起】
国内直连ChatGPT,Plus会员每月29元起,支持最新o1模型探索更多领域,无需注册OpenAI账号。

这个问题,有点棘手。因为它不是单纯的JavaScript报错。因为用户列表是动态创建的,即可能有一个用户进入房间就在列表里增加一个用户,离开一个用户就从列表里删除这个用户,不好调试,我改成静态的测试。发现没有崩溃,也没有报错。

正在左思右想,感觉IE6容错性能很低,就怀疑是JavaScript动态创建绑定用户列表事件导致内存占用过多。因为用户列表是动态创建的,而绑定右键的方法是写在一个函数里。如:

function bind() {
  var obj = document.getElementsByTagName('li')

  for(var i = 0; i < obj.length; i++) {
    obj[i].onclick = function () {
      ...
    }
  }
}

每当用户列表发生改变(删除、或者添加、或者重建)时就调用一次绑定函数,经过查找资料,发现是IE6对JavaScript内存释放的机制太落后导致。

比如我列表里有是个用户,并且已经绑定了右键侦听,然后我删除列表里这十个用户的DOM节点,在IE6里不会因为DOM节点删除而去自动释放侦听事件的资源,导致内存占用随着DOM节点的不断变化而越来越耗费内存资源,最终就报错崩溃。

解决方法

网上有人说,可以再删除DOM节点之前解除事件绑定在删除,这或许能解决。但我认为更有的方法是把事件写到标签里,如:

<button onclick="bind()">click</button>

这样的方式更好,删除DOM节点,事件也被释放了。

要么,你可以忽略IE6这种破烂的浏览器,一笑而过!

分享

TITLE: IE6标签事件动态绑定导致崩溃

LINK: https://www.qttc.net/238-ie6-dynamic-bind-event-crash.html

NOTE: 原创内容,转载请注明出自琼台博客