Question

I recently read a tutorial on cross-browser event handling… Cross-Browser Event Handling…

I’ve adapted some practises from the tutorial to a generalised function that’s floating around like so…

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;
           };
       }
    }())
};

usage:

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);
}

This is what I’m curious about…
1. Is the ‘isHostMethod’ function necessary?
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?

jsfiddle here
warning: the images are huge, take a while to download, lots of bandwidth, etc.

Answer 1

1.Is the ‘isHostMethod’ function necessary?

Nop, unless you persist to support IE6,7 and 8. Every modern browser uses addEventListener() and removeEventListener() now.

So I guess this is not acceptable, that’s why people uses libs like mootools and jQuery. And they will take care that for you.

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?

It’s depends. If you’re going to build a Gmail, Stackoverflow, FB, G+ or Twitter, memory leak do matter a lot, as the pages on these sites barely refresh, and will live for a long time.

But if you just want to make a web page, attach some events and people will click on a link and move to next. As the context will be freed when they move on, even you do leak some memory, it won’t cause any trouble (though I think you should try to avoid it, but it’s not a must.)

And here is a tutorial from IBM on how to avoid memory leak (which is a little out-of-date, and some patterns are no longer leak memory.) It may help you.

And in practice, you can always profile memory usage using Chrome’s inspector, which is a very powerful tool.