未捕获ReferenceError：未定义Activetab

Question

我有这个脚本：

(function Activetab () {
    var tabs = document.getElementsByClassName('tab');

    for (i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('click', function (e) {
            removeActive();
            e.target.classList.add('active');
         })
    }
})();

function removeActive() {
    var tabs = document.getElementsByClassName('tab');
    for (i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active')
    }
}
window.onload = Activetab();
window.onload = removeActive();

由于某些原因，当我尝试使用window.onload = Activetab(); 返回

未捕获ReferenceError：未定义Activetab

怎么了？ 为什么window.onload函数无法收听Activetab函数

Answer 1

您将立即调用函数Activetab ，您需要阅读有关IIFE （立即调用函数表达式）的更多信息。

我不知道您为什么要立即执行该功能，但这可能是您正在寻找的方法：

function Activetab () {
    var tabs = document.getElementsByClassName('tab');

    for (i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('click', function (e) {
            removeActive();
            e.target.classList.add('active');
         })
    }
};

function removeActive() {
    var tabs = document.getElementsByClassName('tab');
    for (i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active')
    }
}
window.onload = Activetab; // Just assign the function
window.onload = removeActive; // Just assign the function

Answer 2

您有两种选择，不要选择IIFE

function Activetab () {
        var tabs = document.getElementsByClassName('tab');
        for (i = 0; i < tabs.length; i++) {
            tabs[i].addEventListener('click', function (e) {
                removeActive();
                e.target.classList.add('active');
            })
        }
    }

或将其保留为IIFE并删除window.onload = Activetab(); IIFE立即被调用，因此无需调用它

IIFE也可以是匿名的。