title: JavaScript dispatchEvent Not Dispatching
body: <p>I'm having an issue with getting <code>dispatchEvent</code> to work. I'm trying to remove my dependency on jQuery, and have been making my own little extensions to the native API, but I can't get my version of <code>trigger</code> to work using <code>dispatchEvent</code>.</p>
  
  <p>After console logging everything, I know that the <code>eventType</code> is being passed in, the <code>event</code> object is being created, and <code>this</code> refers to the correct target element. Here's the code I've got, I'd appreciate any help.</p>
  
  <pre><code>if (!EventTarget.prototype.trigger) {
      function triggerFunction(
          eventType) {
          const event = new CustomEvent(eventType, {
              bubbles: true,
              cancelable: true
          });
  
          this.dispatchEvent(event);
      }
  
      EventTarget.prototype.trigger = triggerFunction;
  }
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>Here's the rest of the code. There's really nothing much because I was mostly focusing on building up my extensions.</p>
  
  <pre><code>if (!EventTarget.prototype.on) {
      function onFunction(
          eventType,
          targetElement,
          listener) {
          if (targetElement) {
              this.addEventListener(eventType, function (
                  event) {
                  const target = event.target;
  
                  if (target
                      &amp;&amp; target.nodeName !== targetElement) {
                      return;
                  }
  
                  listener.call(target, event);
              }, false);
  
              return this;
          }
  
          this.addEventListener(eventType, listener, false);
  
          return this;
      }
  
      EventTarget.prototype.on = onFunction;
  }
  
  const _pointerTap = "click";
  
  const photosFunction = () =&gt; {
      const $buttonPhotosUpload = document.getElementById("button-photos-upload"),
          $fieldPhotosUpload = document.getElementById("field-photos-upload");
  
      const onButtonPhotosUploadTap = () =&gt; $fieldPhotosUpload.trigger(_pointerTap);
  
      $buttonPhotosUpload.on(_pointerTap, null, onButtonPhotosUploadTap);
  };
  
  document.getElementById("photos") &amp;&amp; photosFunction();
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;div id="photos"&gt;
      &lt;div&gt;
          &lt;button type="button" id="button-photos-upload"&gt;{UPLOAD}&lt;/button&gt;
          &lt;input type="file" id="field-photos-upload" accept="image/*" multiple /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically when the button is pressed, I want to trigger the click event of the input:file so I can hide it visually with CSS. In my jQuery version this works just fine.</p>