title: How to create, add custom properties to and fire custom events in vanilla Javascript
body: <h1>Scenario:</h1>
  
  <p>While browsing the web for a solution to Javascript Custom Events, I couldn't find any practical examples, and even the MDN resource is really limited.</p>
  
  <p>I am trying to rebuild <a href="http://paperjs.org/reference/tool/#onmousedrag" rel="nofollow">paperjs' onMouseDrag event</a>. My intended use is for a paint-like web-application.</p>
  
  <p>The onMouseDrag event fires when:</p>
  
  <ul>
  <li>The left mouse button is down</li>
  <li>The mouse is moving</li>
  </ul>
  
  <h1>Goal: </h1>
  
  <p>The goal here is <em>not</em> to have a working <code>onMouseDrag</code> event. The goal is to have a clear <strong>explanation</strong> and <strong>example</strong> of how to create a <code>CustomEvent</code>. The <code>onMouseDrag</code> event is only there as an example.</p>
  
  <h1>Requirements: </h1>
  
  <ol>
  <li>The answer should be in <a href="http://vanilla-js.com/" rel="nofollow">vanilla-js</a> or plain js. (<em>no jQuery or any other library)</em></li>
  <li>The answer should use <code>new CustomEvent()</code> or <code>new Event()</code>, not any of the deprecated methods.</li>
  <li>When mousedrag gets called, the event argument passed should be the <strong>same</strong> event argument which mousemove receives.</li>
  </ol>
  
  <h1>Code: </h1>
  
  <p>I've tried the following</p>
  
  <pre><code>var onMouseDrag = new CustomEvent('mousedrag'),
      elem = document.getElementById('element'),
      mousedown = false;
  
  elem.addEventListener('mousedrag', function (event) {
      // The event argument passed should be 
      // the same event as the event passed by any other mouse event.
  
      // Do something while the mouse is being dragged.
  });
  
  elem.addEventListener('mousedown', function (event) {
      mousedown = true;
  });
  
  elem.addEventListener('mouseup', function (event) {
      mousedown = false;
  });
  
  elem.addEventListener('mousemove', function (event) {
      if (mousedown) {
          elem.dispatchEvent('mousedrag');
          // Pass the event variable to the dispatched mousedrag.
      }
  });
  </code></pre>