Can there be or is there something already, that can allow me to add multiple event listeners with multiple functions for different elements... on a single line? Maybe an example will help me explain...

I am ing across situations like this in my code:

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

It seems it might be VERY nice to have something along the way of this to shorten the code!

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

I hope this makes sense. Any ideas? If something like this already exists I would like to know. Otherwise maybe I could make a helper function (called makeEvents, or something), that would split the string, and for each element, then each function, attach each event?

I know my existing code logic doesn't make perfect sense at the moment, but I am mostly curious if this could be easily done or already exists.

Can there be or is there something already, that can allow me to add multiple event listeners with multiple functions for different elements... on a single line? Maybe an example will help me explain...

I am ing across situations like this in my code:

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

It seems it might be VERY nice to have something along the way of this to shorten the code!

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

I hope this makes sense. Any ideas? If something like this already exists I would like to know. Otherwise maybe I could make a helper function (called makeEvents, or something), that would split the string, and for each element, then each function, attach each event?

I know my existing code logic doesn't make perfect sense at the moment, but I am mostly curious if this could be easily done or already exists.

• javascript
• function
• events
• addeventlistener
• dom-events

Share Improve this question Follow edited Sep 18, 2019 at 17:38 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 24, 2012 at 19:13 theMaxxtheMaxx 4,12622 gold badges2828 silver badges3434 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Try the following:

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

This way the 'keyup' event will call both functions and you have more control over the order that they are called in.

jquery can bind multiple events to multiple elements

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

Lucky for you that someone invented functions

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