HTML несколько событий для запуска одной и той же функции

Question

Есть ли способ иметь несколько событий (например, oninput, onblur) запускает точно такую ​​же функцию в HTML?

Это HTML, что я пытаюсь упростить:

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

Я знаю, что это возможно в JQuery, как объяснено here, но так как у меня есть много различных входов (например, адрес, почтовый индекс, и т. д.), которые должны вызывать разные функции (например, toggleSuccessIcon (this, isAddresss), toggleSuccessIcon (это, isPostCode) и т. д.) Я хотел избежать многократной и грязной инициализации в JavaScript. Однако, если я ошибаюсь, делая это в HTML, а не в JQuery, я был бы признателен за разъяснение в пользу использования JQuery.

Обратите внимание, что isEmail, isAddress, isPostCode и т.д. это имя функции.

Answer 1

Вы можете использовать вспомогательную функцию

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

Answer 2

Вы можете использовать data как:

<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" /> 

в JQuery вы можете использовать что-то вроде:

$('.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()); 
} 

Answer 3

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