Unbind event in Javascript

Question

I'm just getting started with A/B test using Dynamic Yield. I'm facing a few issues overwriting events that are fired by Javascript.

Let's for the sake of this example take this function written in the frontend:

        $('body')
            .on('mouseenter focusin', 'class1', () => {
                $('body').trigger('menu:close');
            });

Now my question is, how can I overwrite this event on after the whole file is already initialized? As you know this kind of A/B test has to overwrite the code loaded on the page. So for example I'd like to remove this trigger event. Does anyone has any idea on how to proceed? I should write only pure Javascript because at this stage I do not have access to Jquery.

Thanks

Possible duplicate of [Best way to remove an event handler in jQuery?](https://stackoverflow.com/q/209029/218196) — Felix Kling, May 16 '22 at 16:12
@FelixKling actually the point is the same but translated to Javascript — glance, May 16 '22 at 16:18

score 1 · Accepted Answer · answered May 16 '22 at 16:09

1

Use the .off() method:

$('body').off('mouseenter focusin', 'class1');

Note that this will remove all handlers for these events delegated to this class, not just the ones added by the original code. If you want be more selective you need to use a named function rather than an anonymous function, so you can give the same function later.

function handler() {
  $('body').trigger('menu:close');
}
$('body').on('mouseenter focusin', 'class1', handler);
// later
$('body').off('mouseenter focusin', 'class1', handler);

Another solution is to use namespaced events.

$('body').on('mouseenter.test focusin.test', 'class1', () => $('body').trigger('menu:close'););
// later
$('body').off('mouseenter.test focusin.test', 'class1');

answered May 16 '22 at 16:09

Barmar

741,623
53
500
612

Hi! Thanks this works in Jquery but my question was how to do it in Javascript! thanks again – glance May 16 '22 at 16:29
I don't think there's a pure JS way to remove a handler added by jQuery, because it's stored in internal jQuery variables. – Barmar May 16 '22 at 16:31
@mhodges That won't work because the event listener is a jQuery internal function, not the function the user supplied. You can only do that if the event listener was added using `addEventListener`, not `.on()`. – Barmar May 16 '22 at 17:50
Ah I misread the question. What a strange use case – mhodges May 16 '22 at 17:53

score 1 · Answer 2 · answered May 16 '22 at 18:16

You can remove the event by deleting the property Jquery appends to the object:

In my case it's called jQuery360075100310324570631. In code below the event of the button is removed

      $("body").on("click", ".class1", () => {
        console.log("click!!");
      });

      function deleteEvent() {
        const a = document.getElementsByTagName("body")[0];
        const regex = new RegExp(/jQuery\d*/);
        for (const key in a) {
          if (regex.test(key)) {
            delete a[key];
            return;
          }
        }
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="class1">button</button>
<button class="class2" onclick="deleteEvent()">remove event from button</button>

score 0 · Answer 3 · answered May 16 '22 at 16:09

0

$('body').off('mouseenter focusin', 'class1');

answered May 16 '22 at 16:09

mrash

883
7
18

Hi! Thanks this works in Jquery but my question was how to do it in Javascript! thanks again – glance May 16 '22 at 16:29
https://stackoverflow.com/a/46986927/1940200 – mrash May 16 '22 at 16:38

Unbind event in Javascript

3 Answers3

Linked