Question

哪种方法更好，为什么？如果它不是那么黑白，那么什么实例需要采用哪种方法？

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

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

或者

function clickHandler(e) {
    // do stuff
}

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

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

Answer 1

有一种情况需要named handlers。

假设您将处理程序绑定到元素;由于某种原因必须删除元素。你删除它;那么绑定DOM元素/处理程序呢？

这种情况会导致内存泄漏。除了期望一些缺陷，如果你将同一个处理程序绑定到一个模仿你之前删除的元素的元素。

每当您需要删除绑定了处理程序的DOM元素时，请使用named handler，因为在取消绑定DOM和处理程序时需要传递处理程序。

因此addEventListener的对应方为removeEventListener

Answer 2

如果它非常小，可以内联它们，但如果你做的不止一件事，那么阅读代码会更加困难。

没有100％正确的答案，但一般来说如果它是一个陈述，可以内联它，而多个陈述应该用他们自己的方法。

Answer 3

您通常应该选择您认为最容易阅读和维护的风格。但是，第二个选项确实有一个缺点：pollutes the global namespace。

我实际上更喜欢第三种选择：

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

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

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

但同样，这主要是一个偏好问题。

用自己的方法而不是内联创建事件处理程序总是更好吗？

3 个答案: