Is it Always Better to Create Event Handlers In Their Own Method Instead of Inline?

Question

Which approach is better and why? If it's not so black and white, what instance calls for which approach?

function bindStuff() {
    var myElement = document.getElementById('someElement');

    myElement.addEventListener('click', function(e) {
        // do stuff
    });
}

Or

function clickHandler(e) {
    // do stuff
}

function bindStuff() {
    var myElement = document.getElementById('someElement');

    myElement.addEventListener('click', clickHandler);
}

This calls for heavily opinionated results, but in general: no, the method you use depends on the use case, the specific situation, and most of all personal preference. — Niels Keurentjes, Jan 14 '14 at 22:36
Often, you want to use (and modify) some variables in the parent function's scope inside your event handler, e.g. `myElement` inside `bindStuff`. In that case, you *need* the closure and thus you can't easily extract the handler. — Mattias Buelens, Jan 14 '14 at 22:40

score 1 · Accepted Answer · answered Jan 14 '14 at 22:41

There is a case where named handlers are prefered.

Suppose you bind an handler to an element; for some reason that element must be removed. You remove it; what about the binding DOM element/handler?

This situation leads to memory leaks. Besides expect some flaws in case you bind the same handler to an element that mimic the one you previously removed.

Whenever you need to remove DOM elements against which handlers have been bound to, use a named handler because you need to pass the handler when unbinding the DOM and the handler.

So the counterpart to addEventListener is removeEventListener

This is actually more of what I was looking for in terms of an answer. — Levi Hackwith, Jan 14 '14 at 22:43

score 0 · Answer 2 · answered Jan 14 '14 at 22:37

If it's something extremely small, it's fine to inline them, but it's more difficult to read the code if you're doing more than one thing.

There's no 100% correct answer, but generally if it's one statement, it's ok to inline it, whereas multiple statements should go in their own methods.

score 0 · Answer 3 · edited May 23 '17 at 11:57

You should generally prefer whichever style you feel is easiest to read and maintain. However, the second option does have one downside: it pollutes the global namespace.

I actually prefer a third option:

function bindStuff() {
    var myElement = document.getElementById('someElement');

    var clickHandler = function(e) {
        // do stuff
    }

    myElement.addEventListener('click', clickHandler);
}

But again, this is mostly a matter of preference.

Is it Always Better to Create Event Handlers In Their Own Method Instead of Inline?

3 Answers3