HTML multiple events to trigger the same function

Question

Is there a way to have multiple events (e.g. oninput, onblur) trigger exactly the same function in the HTML?

This is the HTML that I'm trying to simplify:

<input id="Email" name="Email" type="text" oninput="toggleSuccessIcon(this, isEmail)" onblur="toggleSuccessIcon(this, isEmail)">

I know this is possible in jQuery as explained here, but since I have a lot of different inputs (e.g. address, postcode, etc.) that need to call different functions (e.g. toggleSuccessIcon(this, isAddresss), toggleSuccessIcon(this, isPostCode), etc.) I wanted to avoid having a long and messy initialisation in the JavaScript. However, if I am being foolish by doing this in HTML rather than JQuery I'd appreciate an explanation as to the advantage of using JQuery.

Note that isEmail, isAddress, isPostCode, etc. is a function name.

You can attach events through addEventListener in JavaScript or in much cleaner way using jQuery. — Sandeep Nayak
– Sandeep Nayak, Commented Apr 22, 2015 at 6:21
All the inputs actually use "toggleSuccessIcon", but the second and optional third parameter varies from input to input, e.g. <input id="Address" name="Address" type="text" oninput="toggleSuccessIcon(this, hasContent, 5)" onblur="toggleSuccessIcon(this, hasContent, 5)"> — Tarostar
– Tarostar, Commented Apr 22, 2015 at 6:45

Arun Bertil · Accepted Answer · 2015-04-22 06:21:09Z

3

You could use a helper function

// events and args should be of type Array
function addMultipleListeners(element,events,handler,useCapture,args){
  if (!(events instanceof Array)){
    throw 'addMultipleListeners: '+
          'please supply an array of eventstrings '+
          '(like ["onblur","oninput"])';
  }
  //create a wrapper for to be able to use additional arguments
  var handlerFn = function(e){
    handler.apply(this, args && args instanceof Array ? args : []);
  }
  for (var i=0;i<events.length;i+=1){
    element.addEventListener(events[i],handlerFn,useCapture);
  }
}

function handler(e) {
  // do things
};

// usage
addMultipleListeners(document.getElementById('Email'),
                     ['oninput','onblur'],handler,false);

answered Apr 22, 2015 at 6:21

Arun Bertil

4,6584 gold badges36 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai Matei · Accepted Answer · 2015-04-22 06:28:15Z

2

You can use data as:

<input class="configurable-events" type="text" data-events="blur focus click" data-function="myFunction" />
<input class="configurable-events" type="password" data-events="blur focus" data-function="myPasswordFunction" />

in jQuery you can use something like:

$('.configurable-events').each(function(){
    $(this).on($(this).data('events'), function(){
      $(this).data('function')($(this));
    });
});

function myFunction(myInput) {
  console.log(myInput.value());
}

function myPasswordFunction(myPasswordInput) {
  console.log(myPasswordInput.size());
}

answered Apr 22, 2015 at 6:28

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Comments

Aneesh R S · Accepted Answer · 2015-04-22 06:31:35Z

2

$("input").on( "click blur", toggleSuccessIcon(this, isEmail));

answered Apr 22, 2015 at 6:31

Aneesh R S

3,8174 gold badges25 silver badges35 bronze badges

2 Comments

Tarostar Over a year ago

This would be great if I wanted to add the same function to all inputs, however the second parameter of toggleSuccessIcon is a input field dependent parameter.

Aneesh R S Over a year ago

The answer only depends on what you asked.If you want to change it for this input field only, then make $("#isEmail") instead of $("input").I dont get what you actually mean by isEmail as the second parameter.You will always get the id from the selector by using $(this).attr('id').

user2620460 · Accepted Answer · 2023-07-18 18:09:22Z

2

I know this is so massively late, but I thought I'd throw my hat in the ring anyway. When I have numerous events that need to trigger the same thing, it feels so wasteful to do 3-5 eventListeners, so what I do is making a forEach-loop on an array that holds the event-names in vanilla JS. I wish though, that the eventListener could accept an array as a name directly, but here we are.

    const element = document.getElementById('Email');

    ['input', 'blur'].forEach(eventName =>{
        element.addEventListener(eventName, event=>{
            // Your eventcode goes here.
        });
    });

answered Jul 18, 2023 at 18:09

user2620460

1881 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

HTML multiple events to trigger the same function

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related