javascript - 更改类不起作用的函数

Question

我有这些函数来添加监听器来改变类:

function dropClass(el, style){
    if(el.classList.contains(style) === true){
         el.classList.remove(style);
    };
};

function addClass(el, style){
    if(el.classList.contains(style) === false){
        el.classList.add(style);
    };
};

function onLoad(myFunction){
    document.addEventListener('load', myFunction);
};

function onClickAdd(el, style){
    el.addEventListener('click', addClass(el, style));
};

function onClickRemove(el, style){
    el.addEventListener('click', dropClass(el, style));
};

function onMouseOverAdd(el, style){
    el.addEventListener('mouseover', addClass(el, style));
};

function onMouseOverRemove(el, style){
    el.addEventListener('mouseover', dropClass(el, style));
};

...并让他们中的一些人在他们实际工作的地方相互交流:

onLoad(addClass(body, 'openEyes'));
onLoad(addClass(h1, 'slideDown'));
onLoad(addClass(p1, 'slideRight'));
onLoad(addClass(p2, 'slideLeft'));
onLoad(addClass(p3, 'slideUp')); 

...但是当我尝试使用监听器事件函数时，它们不会基于定义的操作而是在页面加载时起作用。怎么了？

一个不起作用的函数堆叠类型的例子:

onLoad(onClickAdd(el, style);

它“有效”是因为它添加了类，但它不会在监听器事件上执行，而只会在它不应该执行的页面加载上执行。这是我正在构建的网站，并试图在不过于静态的情况下进行极简主义设计(http://myskills.epizy.com/DynamicSite.html)，这些功能应该可以工作，但由于某些原因不能。

Answer 1

您将其定义为仅在加载时触发:

onLoad(addClass(body, 'openEyes'));
onLoad(addClass(h1, 'slideDown'));
onLoad(addClass(p1, 'slideRight'));
onLoad(addClass(p2, 'slideLeft'));
onLoad(addClass(p3, 'slideUp')); 

function onLoad(myFunction){
    document.addEventListener('load', myFunction);
};

如果您希望它在点击时起作用，请使用您定义的函数之一:

function onClickAdd(el, style){
    el.addEventListener('click', addClass(el, style));
};

function onClickRemove(el, style){
    el.addEventListener('click', dropClass(el, style));
};

function onMouseOverAdd(el, style){
    el.addEventListener('mouseover', addClass(el, style));
};

function onMouseOverRemove(el, style){
    el.addEventListener('mouseover', dropClass(el, style));
};

例如:

onClickAdd(addClass(h1, 'slideDown'));
onMouseOver(addClass(p1, 'slideRight'));
onMouseOverRemove(addClass(p1, 'slideRight'));