Call / Trigger all functions (bind event handlers) Programatically?

Question

I have a Javascript file which contains bind events. Each bind event is on a different element / selector.

I need to be able to go through each bind event, identify the selector (perhaps with event.delegateTarget - How to get selector on which 'click' event has been bound?)

Then trigger the corresponding bind event.

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


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

I guess this would involve:

Being able to loop through all functions / bind events
Find the selector
Trigger the corresponding jQuery bind event on that selector

How would I approach this problem ?

It is tricky because, I can't use $('.element-selector').trigger('click') because the selectors are dynamic, and the bind events are also dynamic. Also some functions are set up using event delegation , and some are not. I tried to illustrate that with the examples I showed above.

What is your [actual problem](https://meta.stackexchange.com/q/66377)? Is this for a testing framework of some kind? "*I want to go through this js file*" is a pretty weird requirement otherwise. — Bergi, Feb 27 '18 at 18:09
Yes that is correct, I have a javascript file which contains bind events. Each bind event is on a different element / selector. I need to be able to go through each bind event, identify the selector (perhaps with event.delegateTarget - https://stackoverflow.com/questions/18611580/how-to-get-selector-on-which-click-event-has-been-bound) Then trigger the corresponding bind event. Does that help to clarify the problem ? — TABISH KHAN, Feb 27 '18 at 18:20
Would an acceptable solution involve redefining `$` to intercept the event listeners before executing the file? — Patrick Roberts, Feb 27 '18 at 18:29

score 0 · Answer 1 · answered Feb 27 '18 at 18:54

This solution depends on the attachment point. For ease of demonstration I used the '*' selector to get everything (not so good for most things)

Warning: this uses undocumented functionality

Related jQuery find events handlers registered with an object

IF you want to target specific selectors you can do that instead. i.e. 'body', your class selector etc.

Results of clicking the button here is:

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>

NOTE: reference the included link for older jQuery versions. — Mark Schultheiss, Feb 27 '18 at 18:56

Call / Trigger all functions (bind event handlers) Programatically?

1 Answers1