How can I remove every listener from a page?

Question

I know how to remove a listener from an element, but how can I remove every event listener from every element on the page?

A jQuery and pure JS solution would be nice.

maybe you get an answer here: http://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type — Stefan F., Apr 03 '17 at 06:59
@Ryan - Just for curiosity's sake, really. I couldn't find a SO question that asked this, so I figured now would be a good time to make one. Also, it might be useful for some type of debugging. — Pikamander2, Apr 03 '17 at 07:07

score 2 · Answer 1 · edited May 23 '17 at 12:25

2

I would suggest to look into the .off function of jQuery. Also, based on this stackoverflow question, I would try to remove all every listeners with the following code

$("body").find("*").off();

Hope this could help you.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 03 '17 at 07:01

kevin b.

1,494
1
13
23

I just tested this on https://www.reddit.com/place?webview=true but it doesn't seem to do anything; clicking on the canvas still zooms in and out. Is the code broken or does the canvas not use an event listener? – Pikamander2 Apr 03 '17 at 07:12
Oh, onclick doesn't count as an eventlistener, I think. – Pikamander2 Apr 03 '17 at 07:13
I tried to find something on this canvas related issue, but I can't find more than this post: http://www.c-sharpcorner.com/UploadFile/cd3310/html5-canvas-disable-event-listener-by-name/. – kevin b. Apr 03 '17 at 07:31

score 1 · Answer 2 · answered Apr 03 '17 at 07:02

1

You can try this too.

http://jsfiddle.net/LkfLezgd/9/

$("#cloneButton").click(function() {
$('body').replaceWith($('body').clone().html());
});

answered Apr 03 '17 at 07:02

Muhammad Ramzan

342
3
16

score 1 · Answer 3 · answered Apr 03 '17 at 07:05

You can loop through the form elements as below to remove the event listeners at your preferred way.

The fastest way to do this is to just clone the node which will remove all event listeners but this won't remove if 'onclick' attribute is used.

document.getElementById('button').addEventListener('click', onClick, false);

function onClick() {
   console.log('Form clicked');
   var form = document.getElementById('myForm');

   for(var i = 0; i < form.elements.length; i++){
       var elm = form.elements[i];
       removeEvents(elm);
   }
}

function removeEvents(elm) {
  // The fastest way to do this is to just clone the node, which will remove all event listeners:

   var new_element = elm.cloneNode(true);
   elm.parentNode.replaceChild(new_element, elm);
}

<form id="myForm">
   <input id="button" type="button" value="Click" />
</form>

score 1 · Answer 4 · answered Apr 03 '17 at 07:08

Just Clone the HTML dom, that will remove the events by default.

Here is an example.

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#EventButton").click(function () {
                alert("Click event worked");
                var old_element = document.documentElement;
                var new_element = old_element.cloneNode(true);
                old_element.parentNode.replaceChild(new_element, old_element);
            });
        });
    </script>
</head>

<body>
    <button id="EventButton">Remove Events</button>
</body>

</html>

How can I remove every listener from a page?

4 Answers4