title: Listening to a custom event in javascript
body: <p>i was reading an article on the MDN website talking about how to <strong>customise</strong> an events in javascript <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events</a> and i was able to create this</p>
  <pre><code>const evt = new CustomEvent(&quot;swipe&quot;, {
      detail: {
         color: &quot;red&quot;
       }
  });
  
  documet.addEventListener(&quot;swipe&quot;, e =&gt; {
          console.log(e.detail);
      });
  
  document.dispatchEvent(evt);
  </code></pre>
  <p>But the problem is, the event got triggered immediately, how can i stop this by defining what a <code>swipe</code> really is? for example, i want the event to be triggered when someone click on the screen but i still want to use the <code>swipe</code> word as it's listener.</p>