Question

我的HTML中的各种对象都有一个包含多个eventlistener的大代码，它们都是“click”侦听器。现在我意识到我想要在所有这些对象上使用另一个eventlistener。除了点击监听器，我想要鼠标中心监听器。我已经写完了所有内容，但我认为应该有一个更简单的方法来做到这一点。这可能有点模糊，但这基本上就是我现在所拥有的：

object1.addEventListener("click", function(){
    if(condition1){
        function1();
    }
});

object2.addEventListener("click", function(){
    if(condition2){
        function2();
    }
});

etcetera etcetera

我想保留这些功能，并使用'mouseenter'监听器创建新功能。如果满足每个对象的尊重条件，这些新函数都将执行相同的操作。所以我想要这个：

object1.addEventListener("click", function(){
    if(condition1){
        function1();
    }
});

object1.addEventListener("mouseenter", function(){
    if(condition1){
        myAnimation();
    }
});

object2.addEventListener("click", function(){
    if(condition2){
        function2();
    }
});

object2.addEventListener("mouseenter", function(){
    if(condition2){
        myAnimation();
    }
});

etcetera etcetera

就像我说的，我可以编写所有代码，但是有超过100个函数。如果Javascript有一种方法可以通过函数生成它，那将是非常棒的。

编辑：

我正在做的是建立故事情节（在带有Aframe的VR中）。您可以单击许多元素，但只有在故事允许的情况下，才能解释侦听器中的条件。我现在要做的事情（我意识到太晚了）是一个带光标的动画，只要光标悬停在要点击的右边元素上，用户就知道点击什么而不必点击所有元素在房间里。因此，所有'mouseenter'监听器都需要与同一元素的'click'监听器相同的特定条件。它听起来仍然含糊不清，但我不知道如何进一步解释这一点。

Answer 1

如果你有办法选择它们（css选择器），你可以遍历你的'html对象'。以下示例假定您要应用侦听器的每个对象都具有“对象”类

var objects = document.querySelectorAll('.object');
[].forEach.call(objects, function(object) {
  // do whatever
  object.addEventListener("click", ...
  object.addEventListener("mouseenter", ...
});

如果你想要的话，你可以改变点击功能中发生的事情，具体取决于'对象'的属性。

如果您没有/不能使用选择器，您可能有其他方法来编译可以迭代的对象数组，并有条件地将事件侦听器应用于它们。

Javascript可以自己基于其他多个函数创建多个函数吗？

1 个答案: