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”作为每个元素的引用...这还没有被包括在内......也许我在监督某些东西，但我没有认为在我的情况下这是必要的...... OR 我应该关心吗？

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

Answer 1

1.是否需要'isHostMethod'功能？

Nop ，除非您坚持支持IE6,7和8.现在每个现代浏览器都使用addEventListener()和removeEventListener()。

所以我想这是不可接受的，这就是为什么人们使用像mootools和jQuery这样的库。他们会照顾你。

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

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

但是，如果你只想制作一个网页，附上一些活动，人们会点击一个链接然后转到下一个。由于上下文在移动时会被释放，即使你确实泄漏了一些内存，也不会造成任何麻烦（虽然我认为你应该尽量避免它，但它不是必须。）

这里有一个来自IBM的tutorial如何避免内存泄漏（这有点过时，有些模式不再是泄漏内存。）它可能对你有帮助。

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

javascript - 添加删除事件

1 个答案: