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

如果要使其工作，请单击CLick，使用定义的功能之一：

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

Answer 2

主要问题是：

在onLoad中，您调用onClickAdd，它不返回处理程序函数而是执行
与调用addClass相同的问题（因此我将addClass和removeClass更改为返回处理程序（使用arrow function）。
在onLoad中将字符串load更改为DOMContentLoaded（info）

在此我提供onClickAdd的示例

function dropClass(el, style) {
  return () => el.classList.remove(style);
};

function addClass(el, style) {
  return () => el.classList.add(style);
};

function onLoad(myFunction) {
  document.addEventListener('DOMContentLoaded', myFunction);
};

function onClickAdd(el, style) {
  el.addEventListener('click', addClass(el, style));
};




let h1 = document.querySelector('h1');

onLoad(() => onClickAdd(h1, 'slideDown'));

.slideDown {
  color: red;
}

<h1>Header</h1>


Click on header

不能更改类别的函数

2 个答案: