javascript - 添加删除事件

Question

我最近读了一篇关于跨浏览器事件处理的教程... Cross-Browser Event Handling...

我已经将教程中的一些实践应用到像这样 float 的通用函数中......

function isHostMethod(object, property) {
    var type = typeof object[property];
    return type === "function" || (type === "object" && !! object[property]) || type === "unknown";
}

var events = {
    add: (function() {
        if (isHostMethod(this, 'addEventListener')) {
            return function(element, type, handler) {
                element.addEventListener(type, handler, false);
            };
        } else if (isHostMethod(this, 'attachEvent')) {
            return function(element, type, handler) {
                element.attachEvent('on' + type, function() {
                    handler.call(element, window.event);
                });
            };
        } else {
            return function(element, type, handler) {
                element['on' + type] = handler;
            };
        }
    }()),
    remove: (function() {
        if (isHostMethod(this, 'removeEventListener')) {
            return function(element, type, handler) {
                element.removeEventListener(type, handler, false);
            };
        } else if (isHostMethod(this, 'detachEvent')) {
            return function(element, type, handler) {
                element.detachEvent('on' + type, function() {
                    handler.call(element, window.event);
                });
            };
        } else {
            return function(element, type, handler) {
                element['on' + type] = null;
           };
       }
    }())
};

用法:

var img_wrap = document.getElementById('img_wrap'),
    img = img_wrap.getElementsByTagName('img'),
    img_amount = img.length;

function do_stuff() {
    //
    //do stuff - update preloaded percentage, etc. 
    //
    events.remove(this, 'load', do_stuff);
}

for (var i = 0; i < img_amount; i += 1) {
    events.add(img[i], 'load', do_stuff);
}

这就是我很好奇的...
1.'isHostMethod'函数是必须的吗？
2. 本教程警告内存泄漏，并概述了一个附加功能，以避免使用“唯一 ID”作为对每个元素的引用...这还没有包括在内...也许我正在监督某些事情，但我没有认为在我的情况下有必要...或者我应该担心吗？

jsfiddle here警告:图像很大，需要一段时间下载，大量带宽等。

Answer 1

1.Is the 'isHostMethod' function necessary?

不行，除非你坚持支持 IE6、7 和 8。每个现代浏览器现在都使用 addEventListener() 和 removeEventListener()。

所以我想这是 Not Acceptable ，这就是人们使用像 mootools 和 jQuery 这样的库的原因。他们会为您处理。

2.The tutorial warns about memory leaks and outlines an addition function for avoiding them using 'unique ids' as a reference to each element... This hasn't been included... Maybe I'm overseeing something but I don't think it's necessary in my case or should I be concerned about memory leaks?

这取决于。如果您要构建 Gmail、Stackoverflow、FB、G+ 或 Twitter，内存泄漏确实很重要，因为这些网站上的页面几乎不会刷新，并且会存在很长时间。

但是如果你只是想制作一个网页，附加一些事件，人们就会点击一个链接并转到下一个。由于当它们继续运行时上下文将被释放，即使你确实泄漏了一些内存，它也不会造成任何麻烦(虽然我认为你应该尽量避免它，但这不是必须。)

这是一个 tutorial来自 IBM 关于如何避免内存泄漏(有点过时，有些模式不再是内存泄漏。)它可能对您有所帮助。

在实践中，您始终可以使用 Chrome 的检查器分析内存使用情况，这是一个非常强大的工具。