HTML多个事件触发相同的功能
有没有办法让多个事件（例如oninput，onblur）在HTML中触发完全相同的功能？
这是我试图简化的HTML：
<input id="Email" name="Email" type="text" oninput="toggleSuccessIcon(this, isEmail)" onblur="toggleSuccessIcon(this, isEmail)">
我知道在jQuery中这是可能的，因为我有很多不同的输入（例如地址，邮政编码等）需要调用不同的函数（例如toggleSuccessIcon（this，isAddresss），toggleSuccessIcon（this，isPostCode）等等）我想避免在JavaScript中进行漫长而混乱的初始化。 但是，如果我在HTML中而不是在JQuery中做到这一点是愚蠢的，那么我将非常感谢关于使用JQuery的优势的解释。
请注意，isEmail，isAddress，isPostCode等是一个函数名称。
你可以使用一个辅助函数
// 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);
您可以将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());
}
$("input").on( "click blur", toggleSuccessIcon(this, isEmail));