4

Is there a way to remove event listener if I know only element and event, but don't know a function?

Something like:

var foo = getElementById("foo");
foo.removeEventListener('click');
john c. j.
  • 490
  • 1
  • 20
  • 59
  • Sorry, its unclear what you're asking about... – Bhojendra Rauniyar Dec 25 '15 at 03:36
  • It is possible using jQuery. However, AFAIK, there is no way to do this using pure JS. You will have use custom methods or wrap `addEventListener` and `removeEventListener` or use jQuery, which lets you easily do `$("#foo").off('click');`. – Yeldar Kurmangaliyev Dec 25 '15 at 03:41
  • Is there only a single handler? – Dave Newton Dec 25 '15 at 03:43
  • @john1121 I mean, use jQuery `on` and jquery `off`. If you attach this handler using pure JS, then there is no way to remove this listener without having a reference to a handler. – Yeldar Kurmangaliyev Dec 25 '15 at 03:44
  • @YeldarKurmangaliyev Thank you very much, you bring the light to my actual problem. Yes, the problem is, that it was added via plain JS. How do you think, is googling something like "remove event listener from anonymous function" can help with it? – john c. j. Dec 25 '15 at 03:47
  • [This](http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type) might help. – Aᴍɪʀ Dec 25 '15 at 03:48

3 Answers3

3

Pure JS methods

There is no way to detach an event listener without having a reference to its listener method.

Method definition requires listener to be specified.

JS with modifications

It is possible to use some sort of custom functions like this:

function addEventListenerAndRemember(element, type, listener, useCapture)
{
    if (!element.myEvents) element.myEvents = {};
    if (!element.myEvents[type]) element.myEvents[type] = [];

    element.myEvents[type].push(listener);

    element.addEventListener(type, listener, useCapture || false);
}

function removeAllEventListener(element, type)
{
    element.myEvents.forEach(function() {
        element.myEvents[type].forEach(function(listener) {
            element.removeEventListener(type, listener);
        });
        element.myEvents[type] = [];
    });
}

I am not sure that this code works - it is just an example for demonstrating the idea.
You can also wrap these methods to addEventListener and override the default behaviour. Just like:

Element.prototype.addEventListenerBase = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(type, listener, useCapture) {
    // do the same
};

jQuery method

As for me, using jQuery library looks like the most clear solution here.

You will be able to attach an event this way:

$("#foo").on('click', function() {

});

and detach it in a simple way:

$("#foo").off('click');
Yeldar Kurmangaliyev
  • 30,498
  • 11
  • 53
  • 87
2

I had the same problem and resolved it in different way. 

$("#myelement").after($("#myelement")[0].outerHTML).remove()
user1324762
  • 747
  • 3
  • 7
  • 23
0

You can check this code..hope it will help..

<a href="#" id="mydiv">click</a>
<a href="#" onclick="removeHandler()">remove</a>

<script>
document.getElementById("mydiv").addEventListener("click", myFunction);

function myFunction() {
    alert('hello');
}

function removeHandler() {
    document.getElementById("mydiv").removeEventListener("click", myFunction);
}
</script>

If you want to remove all event added to the element.

var el = document.getElementById('mydiv'),
elClone = el.cloneNode(true);

el.parentNode.replaceChild(elClone, el);
BlackJack
  • 1,435
  • 2
  • 15
  • 30
  • This doesn't answer the question, the whole point of which is that he wants to remove the `myFunction` handler but doesn't know what it is. –  Dec 25 '15 at 05:58