javascript - 如何在 JavaScript 中为各种事件创建单个事件处理程序

Question

我想用 JavaScript/jQuery 做以下事情:

JavaScript

伪代码!

$.bindalleventhandler('[action]', eventHandler);

eventHandler = function(trigger, element){
    if(trigger == 2 && $(element).attr('event') == 'change'){
        // execute action when change occurs
    }
    else if(trigger == 5 && $(element).attr('event') == 'keydown'){
        // execute action on keydown event
    }
    else{
        //default click
        // execute action by click
    }
}

HTML

<button action="action">click me</button>
<select name="name" action="action" event="change">
     <option value="value">name</option>
     <option value="value">name</option>
     <option value="value">name</option>
</select>

有人知道从哪里开始吗？它必须是 AJAX 证明，就像 jQuery $.on() 方法一样。

我只想将其用于各种事件并将其绑定(bind)到包含 action 属性的元素。也许我只是解析 HTML，然后动态创建事件处理程序，但随后我必须解析每个 AJAX 调用。

免责声明:我不是要你为我编写代码，而是要让我朝着正确的方向前进。

Answer 1

让我向您展示我的自定义 addEvent 函数如何工作的总体思路:

function addEvent(element,event,callback) {
  if( !element.nodeName && element.length) {
    [].forEach.call(element,function(e) {addEvent(e,event,callback);});
  }
  else if( event instanceof Array) {
    event.forEach(function(e) {addEvent(element,e,callback);});
  }
  else if( callback instanceof Array) {
    callback.forEach(function(e) {addEvent(element,event,e);});
  }
  else {
    // do the actual event attaching here
  }
}

基本上，这让我可以传递一些简单的东西，比如
addEvent(document.body,"click",function() {alert('嗨!');});

或者我可以做一些更复杂的事情，比如:

addEvent(
  document.querySelectorAll("input[type=date]"),
  ["focus","change","keyup"],
  function(e) {
    console.log(e.type+" event fired on "+e.target);
  }
);

您应该能够根据您的需要调整我的方法:)