jquery HTML多个事件触发同一函数

ki0zmccv  于 2023-08-04  发布在  jQuery
关注(0)|答案(4)|浏览(153)

有没有一种方法可以让多个事件(* 例如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的优势的解释。
注意 isEmailisAddressisPostCode 等。是一个函数名。

slsn1g29

slsn1g291#

您可以使用一个helper函数

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

字符串

xxslljrj

xxslljrj2#

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

iq3niunx

iq3niunx3#

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

字符串

jw5wzhpr

jw5wzhpr4#

我知道这太晚了,但我想我还是要参加竞选。当我有许多事件需要触发相同的事情时,做3-5个eventListeners感觉很浪费,所以我做的是在一个数组上做一个forEach循环,该数组包含vanilla JS中的event-names。虽然我希望eventListener可以直接接受数组作为名称,但我们在这里。

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

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

字符串

相关问题