Question

我有一个包含绑定事件的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
});

我想这会涉及

1）能够遍历所有函数/绑定事件 2）找到选择器 3）在该选择器上触发相应的jquery绑定事件

我将如何解决这个问题？

这很棘手，因为我不能使用$（'。element-selector'）。触发器（'click'）因为选择器是动态的，绑定事件也是动态的。还有一些函数是使用事件委托设置的，有些则不是。我试图通过上面展示的例子说明这一点。

Answer 1

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

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

相关jQuery find events handlers registered with an object

如果您想要定位特定选择器，则可以改为使用。即'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>

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

1 个答案: