0

I have to remove all the event listener that is added to document.
So according to THIS POST, I have built a function like this but it is showing TypeError: document.parentNode is null!

var msg = document.getElementById('state-msg');
var button =  document.getElementById('removeListener');
document.addEventListener('keydown', function(e) {
  msg.textContent = 'keydown:' + e.keyCode;
});

document.addEventListener('keyup', function(e) {
  msg.textContent = 'keyup:' + e.keyCode;
});

document.addEventListener('keypress', function(e) {
  msg.textContent += 'keypress:' + e.keyCode;
});

button.addEventListener('click', function(e) {
  var elClone = document.cloneNode(true);
  document.parentNode.replaceChild(elClone, document);
});
Press any key and get the message here: <span id="state-msg"></span>
<button id = "removeListener">RemoveListener</button>

This can be very basic question but still, no success, Any kind of comment will be greatly appreciate.

UPDATE:
I also tried document = elNode, but not working.

JJJ
  • 32,902
  • 20
  • 89
  • 102
artgb
  • 3,177
  • 6
  • 19
  • 36
  • `document` is *the topmost* parent node it doesnt have a parent – Nick is tired Nov 18 '17 at 07:19
  • Maybe using something like `getEventListeners(document);` might be of some use? copy/paste this into your browser console. `var listener=getEventListeners(document); for(evt in listener){ console.log('Event Type: '+evt); console.log(listener[evt]);}` Not sure if it will be of any use to you. It isn't removing the event listeners but it is listing the ones in use so maybe you can remove them from there? – NewToJS Nov 18 '17 at 07:33
  • @artgb ah, right. Well it listed them for me using google chrome but haven't really put it to much use hence only offering a suggestion, a shot in the dark. – NewToJS Nov 18 '17 at 07:42
  • I don't think there's a standard way to get event listeners. Why would you need to remove listeners that you didn't add in the first place? – Barmar Nov 18 '17 at 07:46
  • The question you linked to showed how to monkeypatch `addEventListener` to save everything it does. – Barmar Nov 18 '17 at 07:50

1 Answers1

1

Personally, I would name the event listeners, so you can remove them properly. I get what you are trying to do though. However, since this is the document node, it is unlikely you will find a parent node for it. It is the root of your DOM tree after all. If this was a specific element to which you have bound the event listener, your approach would work.

  1. You could extend the addEventListener and removeEventListener to register the functions in a data-structure that you could later use in your function to methodically remove every event listener. See this answer for details.
  2. Yet another option, if you do not mind moving to JQuery, is to use JQuery to attach the listeners and then simply using $(document).off() would remove the listeners attached. It may not work in conjunction with native addEventListener methods.
Serendipity
  • 1,015
  • 1
  • 10
  • 19
  • Hi @Serendipity, thanks for your link , I found some important notes. `_eventHandlers`, but not sure how to use it, it would be great if you create snippet for `_eventHandlers` use, it will help users reduce lots of times – artgb Feb 14 '18 at 13:34