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，或其他东西），它会拆分字符串，并为每个元素，然后每个函数，附加每个事件???

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

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

可以在单行帮助函数上有或者有一个javascript addEventListener多个参数吗？

3 个答案: