如何检测JavaScript中的document.addEventListener支持

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.

Answer 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) );
      }
   }

Answer 2

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 );
  }   
}