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

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