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

我想使用JavaScript/jQuery执行以下操作：

JavaScript

伪代码

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>

<div data-action="save" data-actionparams='{"blog_post":{"id":123}}' id="blog_post_form">
    <form data-action="markDirty" action="/blog_posts/123" method="post">
        <p>
            Title: <input type="text" name="title">
        </p>
        <p>
            Body:<br>
            <textarea name="body"></textarea>
        </p>
        <p>
            <button type="button" data-action="cancel">Cancel</button>
            <button type="submit">Save</button>
        </p>
    </form>
</div>

点击我
名称
名称
名称

有人知道从哪里开始？它必须是AJAX证明，就像jQuery

$.on（）

方法一样

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

---

免责声明：我不是要求您为我编写代码，而是要求您向我发送正确的方向。

让我向您展示我定制的

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（'Hi！'）；}）

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

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

您应该能够根据您的需要调整我的方法：）
让我向您展示一下我定制的
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（'Hi！'）；}）

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

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

您应该能够根据您的需要调整我的方法：）
您可能对活动授权更感兴趣。jQuery中的
$.on
方法无疑是一个不错的选择

$(document.documentElement).on("click change focusin focusout submit keypress", "[action]", null, function(event) {
    if (event.type === this.getAttribute("event")) {
        var action = this.getAttribute("action");
        var $actionElement = $(this);

        // do something based on the action variable
    }
});

我还编写了一个不使用jQuery（或与jQuery一起使用）的事件委派库，它使用了与您所追求的相同的基本理念：

（GitHub）

它是一种面向对象的事件委派方法，允许您编写如下示例所示的代码：

JavaScript“控制器”

通过使用
数据操作
属性，可以真正分离标记、样式和行为。不再将事件处理程序绑定到类名或标记名。您可以自由重构标记，而不会影响您的行为

我经常更改按钮上的类名，并使JavaScript功能中断。用这种方法你不会得到这样的结果

此外，DOM事件委托器还可以与jQuery和其他库无缝协作。对于最流行的框架，有一个适配器，因此您可以在后台使用jQuery来附加和分离事件处理程序。
您可能对事件委派更感兴趣。jQuery中的
$.on
方法无疑是一个不错的选择

$(document.documentElement).on("click change focusin focusout submit keypress", "[action]", null, function(event) {
    if (event.type === this.getAttribute("event")) {
        var action = this.getAttribute("action");
        var $actionElement = $(this);

        // do something based on the action variable
    }
});

我还编写了一个不使用jQuery（或与jQuery一起使用）的事件委派库，它使用了与您所追求的相同的基本理念：

（GitHub）

它是一种面向对象的事件委派方法，允许您编写如下示例所示的代码：

JavaScript“控制器”

通过使用
数据操作
属性，可以真正分离标记、样式和行为。不再将事件处理程序绑定到类名或标记名。您可以自由重构标记，而不会影响您的行为

我经常更改按钮上的类名，并使JavaScript功能中断。用这种方法你不会得到这样的结果

此外，DOM事件委托器还可以与jQuery和其他库无缝协作。对于最流行的框架，有一个适配器，因此您可以在后台使用jQuery来附加和分离事件处理程序。
这不是一个好主意，这些信息根本不属于HTML。你还可以继续使用内联事件处理程序：D。你怎么说只要支持我的js，我就可以使用我喜欢的任何属性？浏览器应该没有问题。XHTML老兄！我不理解你的评论以及XHTML是如何出现的。您可以在HTML中存储任何您想要的内容（我必须注意，使用
数据-
属性），我想指出这是否是一个好主意。您的想法与内联事件处理程序（如
onclick
）没有什么不同，它消除了关注点的分离。我不想使用javascript内联，我希望它是100%的html。它是xhtml，因为它不遵循普通html的标准。不要依赖W3C，它是一个糟糕的资源。我建议使用MDN。这不是一个好主意，这些信息根本不属于HTML。你还可以继续使用内联事件处理程序：D。你怎么说只要支持我的js，我就可以使用我喜欢的任何属性？浏览器应该没有问题。XHTML老兄！我不理解你的评论以及XHTML是如何出现的。您可以在HTML中存储任何您想要的内容（我必须注意，使用
数据-
属性），我想指出这是否是一个好主意。您的想法与内联事件处理程序（如
onclick
）没有什么不同，它消除了关注点的分离。我不想使用javascript内联，我希望它是100%的html。它是xhtml，因为它不遵循普通html的标准。不要依赖W3C，它是一个糟糕的资源。我建议MDN.+1是一个比OP建议的好得多的解决方案。编辑-忘记
else
语句。+1是一个比OP建议的好得多的解决方案。编辑-忘记
else
语句。我还在构建一个名为，但也允许您在实例化控制器时删除JavaScript中的锅炉板代码。我还在构建一个名为的框架，它利用DOM事件委托器，但也允许您在实例化控制器时删除JavaScript中的锅炉板代码。你应该去看看。