How do I detect document.addEventListener support in javascript

Question

I have this javascript code:

   initializeEventHandlers: function() {
      if ( typeof document.implementation != "undefined" &&
         document.implementation.hasFeature("HTML",   "1.0") &&
         document.implementation.hasFeature("Events", "2.0") &&
         document.implementation.hasFeature("CSS",    "2.0") ) {
         document.addEventListener("mouseup",   this._mouseUpHandler.bindAsEventListener(this),  false);
         document.addEventListener("mousemove", this._mouseMoveHandler.bindAsEventListener(this), false);
      }
      else {
         document.attachEvent( "onmouseup",   this._mouseUpHandler.bindAsEventListener(this) );
         document.attachEvent( "onmousemove", this._mouseMoveHandler.bindAsEventListener(this) );
      }
   }

That works in most browsers, but when I use IE11 it fails. I know this is because IE11 removed support for attachEvent, and IE11 falls through to the else condition. I also see that hasFeature is deprecated, so I am not sure how best to detect addEventListner support.

note: document.implementation.hasFeature is deprecated, and always returns true in many cases :p — Jaromanda X
– Jaromanda X, Commented Sep 1, 2016 at 13:26

jmarkmurphy · Accepted Answer · 2016-09-01 13:29:30Z

1

The following code works for IE11 and Firefox, but will it work for other/older browsers?

   initializeEventHandlers: function() {
      if (document.addEventListener) { 
         document.addEventListener("mouseup",   this._mouseUpHandler.bindAsEventListener(this),  false);
         document.addEventListener("mousemove", this._mouseMoveHandler.bindAsEventListener(this), false);
      }
      else if (document.attachEvent) {
         document.attachEvent( "onmouseup",   this._mouseUpHandler.bindAsEventListener(this) );
         document.attachEvent( "onmousemove", this._mouseMoveHandler.bindAsEventListener(this) );
      }
   }

edited Sep 1, 2016 at 13:29

answered Sep 1, 2016 at 13:23

jmarkmurphy

11.6k37 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tschallacka Over a year ago

gist.github.com/eirikbacker/2864711/… github.com/termi/ES5-DOM-SHIM

jakub.g Over a year ago

This is the typical way of checking this (note addEventListener being checked first as the standard-compliant thing, and then old-IE-specific case later). It should work in basically all browsers except maybe ones from two decades ago.

Roman · Accepted Answer · 2018-10-19 18:27:57Z

0

The robust and safe way to see if document accepts the method is to use "try { ... } catch (err){ ... }" construction:

const initializeEventHandlers = () => {
  try {      
    if (document.addEventListener) { 
       document.addEventListener("mouseup",   this._mouseUpHandler.bindAsEventListener(this),  false);
       document.addEventListener("mousemove", this._mouseMoveHandler.bindAsEventListener(this), false);
    }
    else if (document.attachEvent) {
       document.attachEvent( "onmouseup",   this._mouseUpHandler.bindAsEventListener(this) );
       document.attachEvent( "onmousemove", this._mouseMoveHandler.bindAsEventListener(this) );
    }
  }
  catch(err) {
    console.info('Error', err );
  }   
}

edited Oct 19, 2018 at 18:27

answered Oct 17, 2018 at 5:11

Roman

22.3k18 gold badges103 silver badges105 bronze badges

Collectives™ on Stack Overflow

How do I detect document.addEventListener support in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related