单行辅助函数中是否存在或是否存在 Javascript addEventListener 多个参数？

Question

是否有或者已经有一些东西，可以让我为不同的元素添加具有多个功能的多个事件侦听器......在一行上？也许一个例子可以帮助我解释......

我在我的代码中遇到了这样的情况：

inputUrl.addEventListener ('keydown', saveOptions);
inputUrl.addEventListener ('keydown', resizeInput);

inputUrl.addEventListener ('keyup', saveOptions);
inputUrl.addEventListener ('keyup', resizeInput);

inputUrl.addEventListener ('click', saveOptions);
inputUrl.addEventListener ('click', resizeInput);

inputDirectory.addEventListener ('keydown', saveOptions);
inputDirectory.addEventListener ('keydown', resizeInput);

inputDirectory.addEventListener ('keyup', saveOptions);
inputDirectory.addEventListener ('keyup', resizeInput);

inputDirectory.addEventListener ('click', saveOptions);
inputDirectory.addEventListener ('click', resizeInput);

似乎在此过程中有一些东西可以缩短代码！

makeEvents("inputUrl,inputDirectory|saveOptions,resizeInput|keydown,keyup,click")

我希望这是有道理的。有任何想法吗？如果这样的事情已经存在，我想知道。否则，也许我可以创建一个辅助函数（称为 makeEvents 或其他东西），它会拆分字符串，然后为每个元素，然后是每个函数，附加每个事件？

我知道我现有的代码逻辑目前并不完全合理，但我很好奇这是否可以轻松完成或已经存在。

Answer 1

尝试以下方法：

inputUrl.addEventListener ('keyup', function() { saveOptions(); resizeInput(); });

这样，“keyup”事件将调用这两个函数，您可以更好地控制它们被调用的顺序。

Answer 2

jquery可以将多个事件绑定到多个元素

$(inputUrl).add(inputDirectory).bind("keydown, keyup, click", function(){
     resizeInput(this);     
     saveOptions(this);
});

Answer 3

你很幸运有人发明了函数

function setupEvents(element, action)
{
    element.addEventListener("keydown", action);
    element.addEventListener("keyup", action);
    element.addEventListener("click", action);
}

function setupActions(element)
{
    setupEvents(element, saveOptions);
    setupEvents(element, resizeInput);
}

setupActions(inputUrl);
setupActions(inputDirectory);