fix(events): ensure we attach events to objects we know how to (#3727)

In addition log a warning if the listener isn't going to get added

Fixes #3272

src/js/component.js

@@ -778,18 +778,17 @@ class Component {
       // Add the same function ID so we can easily remove it later
       cleanRemover.guid = fn.guid;
 
-      // Check if this is a DOM node
-      if (first.nodeName) {
-        // Add the listener to the other element
-        Events.on(target, type, fn);
-        Events.on(target, 'dispose', cleanRemover);
-
-      // Should be a component
-      // Not using `instanceof Component` because it makes mock players difficult
-      } else if (typeof first.on === 'function') {
+      // If we are attaching to a component like object use the preferred `on` method
+      if (typeof target.on === 'function') {
         // Add the listener to the other component
         target.on(type, fn);
         target.on('dispose', cleanRemover);
+      } else if (Events.canAttachEvent(target)) {
+        // Add the listener to the other element
+        Events.on(target, type, fn);
+        Events.on(target, 'dispose', cleanRemover);
+      } else {
+        log.warn(`Not adding ${type} listener. Not sure how to add it.`);
       }
     }
 

src/js/utils/events.js

@@ -203,6 +203,20 @@ export function fixEvent(event) {
   return event;
 }
 
+/**
+ * Determine if the events utility will be able to attach events to this object.
+ *
+ * @param {Object} obj Object to check
+ * @method canAttachEvent
+ * @return {Boolean} True if events can be attached to this object
+ */
+export function canAttachEvent(obj) {
+  const hasAddListener = typeof obj.addEventListener === 'function';
+  const hasAttachEvent = typeof obj.attachEvent === 'function';
+
+  return hasAddListener || hasAttachEvent;
+}
+
 /**
  * Add an event listener to element
  * It stores the handler function in a separate cache object