HTML 多个事件触发同一个功能答案

【问题标题】：HTML multiple events to trigger the same functionHTML 多个事件触发同一个功能
【发布时间】：2015-06-29 14:48:58
【问题描述】：

有没有办法让多个事件（例如 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(this, isPostCode), etc.) 我想避免在 JavaScript 中进行冗长而混乱的初始化。但是，如果我在 HTML 而不是 JQuery 中执行此操作是愚蠢的，我希望能解释一下使用 JQuery 的优势。

注意isEmail、isAddress、isPostCode等都是函数名。

【问题讨论】：

我认为将 js 与 html 混合使用会更加混乱
您可以在 JavaScript 中通过 addEventListener 或使用 jQuery 以更简洁的方式附加事件。
所有输入实际上都使用“toggleSuccessIcon”，但是第二个和可选的第三个参数因输入而异，例如

标签： javascript jquery html

【解决方案1】：

您可以将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());
}

【讨论】：

【解决方案2】：

你可以使用辅助函数

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

【讨论】：

【解决方案3】：

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

【讨论】：

如果我想为所有输入添加相同的功能，那就太好了，但是 toggleSuccessIcon 的第二个参数是输入字段相关参数。
答案仅取决于您的要求。如果您只想为此输入字段更改它，则使用 $("#isEmail") 而不是 $("input")。我不明白您将 isEmail 作为第二个参数的实际含义。您将始终使用 $(this).attr('id') 从选择器中获取 id。