3

我最近读了一篇关于跨浏览器事件处理的教程……跨浏览器事件处理……

我已经将教程中的一些实践改编为像这样浮动的通用函数......

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这里 警告：图像很大，需要一段时间才能下载，大量带宽等。

4

1 回答 1

3

1.isHostMethod功能有必要吗？

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

所以我想这是不可接受的，这就是人们使用像 mootools 和 jQuery 这样的库的原因。他们会为你处理好这些。

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

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

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

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

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

于 2012-12-01T07:39:55.107 回答