HTML多个事件触发相同的功能

Question

有没有办法让多个事件（例如oninput，onblur）触发完全相同的HTML函数？

这是我要简化的HTML：

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

我知道这是可能的jQuery中的解释在这里，但因为我有很多的不同的输入（例如地址，邮政编码等），其需要调用不同的功能（例如toggleSuccessIcon（这一点，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);