javascript - 使用事件监听器发送数据

Question

我有一个困境:我想用事件监听器发送一些数据，但也能够删除监听器。这是标准的关闭方法...

var fn = function(e){method(e,data)};
el.addEventListener('click',fn,false);
el.removeEventListener('click',fn,false);

你可以删除事件，就好了。但是说，该元素已从 DOM 中删除？然后，您将剩下 fn 函数。删除几千个 DOM 元素后，会导致内存泄漏。

我考虑过附加一个 DOMNodeRemoved 事件处理程序，它将删除所有剩余的函数/数据以及已删除的节点。但显然，该事件不是跨浏览器兼容的。

我想到的唯一其他选择是修改元素的 DOM。考虑...

el.MyEventData = function(e){method(e,data)};
el.addEventListener('click',el.MyEventData,false);
el.removeEventListener('click',el.MyEventData,false);

在这种情况下可以修改 DOM 吗？该解决方案唯一棘手的部分是当您尝试添加多个事件监听器时。假设我们创建了一个自定义函数来解析事件的添加/删除...

function makeEvent(fn,data){
    var dataFn = function(e){fn(e,data)};
    //create object to hold all added events
    el.myEvents = {};
    //make ID for this specific event
    var eventID = ranString();
    //add the event to the events object
    el.myEvents[eventID] = [fn,dataFn];
    //finally add the listener
    el.addEventListener('click',dataFn,false);
}
function destroyEvent(fn){
    //find all fn references
    for(var id in el.myEvents){
        if (el.myEvents[id][0] == fn){
            el.removeEventListener('click',el.myEvents[id][1],false);
            el.myEvents[id] = null;
        }
    }
}

它仍然像以前一样修改 DOM，当然也不是一个非常优雅的解决方案。有谁知道任何替代的、更好的数据传递方法？

编辑:因此，我研究了一些 jQuery 的数据/事件脚本。我不完全理解代码，所以如果有人能澄清一下，那会很有帮助。但似乎他们使用了类似的方法，通过创建某种类型的 el.cache 属性来保存事件数据。

Answer 1

考虑到您使用 addEventListener，这不是问题，因为所有现代垃圾收集器都可以处理此类情况。事件监听器的问题只存在于 IE 的实现中(7-)。

Test - 10 000 addEventListener 和删除元素(请参阅 Windows 任务管理器)

When a DOM object contains a reference to a JavaScript object (such an event handling function), and when that JavaScript object contains a reference to that DOM object, then a cyclic structure is formed. This is not in itself a problem. At such time as there are no other references to the DOM object and the event handler, then the garbage collector (an automatic memory resource manager) will reclaim them both, allowing their space to be reallocated. The JavaScript garbage collector understands about cycles and is not confused by them.

http://www.crockford.com/javascript/memory/leak.html