以编程方式调用/触发所有函数（绑定事件处理程序）？答案

【问题标题】：Call / Trigger all functions (bind event handlers) Programatically?以编程方式调用/触发所有函数（绑定事件处理程序）？
【发布时间】：2018-08-07 11:28:00
【问题描述】：

我有一个包含绑定事件的 Javascript 文件。每个绑定事件都在不同的元素/选择器上。

我需要能够通过每个绑定事件，识别选择器（可能使用 event.delegateTarget - How to get selector on which 'click' event has been bound?）

然后触发相应的绑定事件。

$('body').on('click', '.element-selector', function() {
  // DO ACTION HERE
});


$('.element-selector').change(function() {
   // DO ACTION HERE
});

我想这将涉及：

能够循环遍历所有函数/绑定事件
找到选择器
在该选择器上触发相应的 jQuery 绑定事件

我将如何解决这个问题？

这很棘手，因为我不能使用$('.element-selector').trigger('click')，因为选择器是动态的，绑定事件也是动态的。还有一些功能是使用事件委托设置的，而有些则不是。我试图用上面展示的例子来说明这一点。

【问题讨论】：

你的actual problem 是什么？这是针对某种测试框架的吗？ “我想通过这个 js 文件”否则是一个非常奇怪的要求。
是的，这是正确的，我有一个包含绑定事件的 javascript 文件。每个绑定事件都在不同的元素/选择器上。我需要能够遍历每个绑定事件，识别选择器（可能使用 event.delegateTarget - stackoverflow.com/questions/18611580/…）然后触发相应的绑定事件。这有助于澄清问题吗？
一个可接受的解决方案是否涉及重新定义$ 以在执行文件之前拦截事件侦听器？

标签： javascript jquery closures jquery-events

【解决方案1】：

此解决方案取决于连接点。为了便于演示，我使用了'*' 选择器来获取所有内容（对于大多数事情来说并不是那么好）

警告：这使用了未记录的功能

如果你想定位特定的选择器，你可以这样做。即'body'，你的类选择器等。

点击这里按钮的结果是：

checking...
type: object
{
  "click": [
    {
      "type": "click",
      "origType": "click",
      "data": undefined,
      "handler": function () {
  // DO ACTION HERE
  console.log("got click");
},
      "guid": 2,
      "selector": ".element-selector",
      "needsContext": false,
      "namespace": ""
    }
  ]
}
type: object
{
  "custom": [
    {
      "type": "custom",
      "origType": "custom",
      "data": undefined,
      "handler": function () {
  // DO ACTION HERE
  console.log("got change");
},
      "guid": 4,
      "selector": undefined,
      "needsContext": undefined,
      "namespace": ""
    }
  ]
}
type: object
{
  "change": [
    {
      "type": "change",
      "origType": "change",
      "data": undefined,
      "handler": function () {
  // DO ACTION HERE
  console.log("got change");
},
      "guid": 6,
      "selector": undefined,
      "needsContext": undefined,
      "namespace": ""
    }
  ]
}
type: object
{
  "click": [
    {
      "type": "click",
      "origType": "click",
      "data": undefined,
      "handler": function checkme() {
  console.log('checking...');
  $('*').each(function(index, element) {
    var evts = $._data(element, "events");
    if (typeof evts === "object") {
      console.log("type:", typeof evts);
      console.log(evts);
    }
  });
},
      "guid": 8,
      "selector": undefined,
      "needsContext": undefined,
      "namespace": ""
    }
  ]
}

$('body').on('click', '.element-selector', function() {
  // DO ACTION HERE
  console.log("got click");
});
$('.element-selector').on('custom', function() {
  // DO ACTION HERE
  console.log("got custom");
});

$('.input-element-selector').on('change', function() {
  // DO ACTION HERE
  console.log("got change");
});

function checkme() {
  console.log('checking...');
  $('*').each(function(index, element) {
    var evts = $._data(element, "events");
    if (typeof evts === "object") {
      console.log("type:", typeof evts);
      console.log(evts);
    }
  });
}

$('.trigger-weird').on('click', checkme);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="element-selector">howdy</div>
<input type="text" class="input-element-selector" />
<button class="trigger-weird">click me</button>

【讨论】：

注意：参考旧 jQuery 版本的包含链接。