添加删除事件

Question

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

我已经将教程中的一些实践改编成一个通用的函数，就像这样......

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.'isHostMethod'函数有必要吗？

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

所以我想这是不可接受的，这就是人们使用诸如 mootools 和 jQuery 之类的库的原因。他们会为您解决这些问题。

2.本教程警告内存泄漏并概述了一个附加功能，以避免使用“唯一 ID”作为每个元素的引用来避免它们......这还没有被包括在内......也许我正在监督一些事情，但我不认为在我的情况下这是必要的，还是我应该担心内存泄漏？

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

但是，如果您只想制作网页，请附加一些事件，人们会单击链接并转到下一个。由于上下文将在它们继续前进时被释放，即使您确实泄漏了一些内存，也不会造成任何麻烦（尽管我认为您应该尽量避免它，但这不是必须。）

这是来自 IBM 的 tutorial，关于如何避免内存泄漏（这有点过时，并且某些模式不再泄漏内存。）它可能会对您有所帮助。

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