title: understanding how PreventDefault and DefaultPrevented work with custom events
body: <p>I am just looking at this bootstrap Jquery code here, in <a href="https://github.com/twbs/bootstrap/blob/master/js/carousel.js#L132" rel="nofollow noreferrer">carasoul.js</a>, I am having a small difficulty understanding how defaultprevented and preventDefault work with custom Events. Have a look here at the bootstrap code:</p>
  <pre><code>var relatedTarget = $next[0]
  var slideEvent = $.Event('slide.bs.carousel', {
    relatedTarget: relatedTarget,
    direction: direction
  })
  this.$element.trigger(slideEvent)
  if (slideEvent.isDefaultPrevented()) return 
  </code></pre>
  <p>see this check here  <code>if (slideEvent.isDefaultPrevented()) return</code> basically I don't understand how <code>isDefaultPrevented())</code> can be used with a custom event , I tried creating a demo here :</p>
  <pre><code>var slideEvent = $.Event('slide');
  
  $('a').on('click' , function(e){
      e.preventDefault(); 
      $(this).trigger(slideEvent);
  })
  
  $('a').on('slide' , function(e){
      e.preventDefault();
  })
  
  if (slideEvent.isDefaultPrevented()) {
          console.log('is default prevented');
  }  
  </code></pre>
  <p>but somehow the below block of code never console.log's :</p>
  <pre><code>if (slideEvent.isDefaultPrevented()) {
          console.log('is default prevented');
  }  
  </code></pre>
  <p>maybe I am doing it the wrong way. Can somebody explain? All I want to do is understand how PreventDefault() and DefaultPrevented work with custom events and I want a working demo so that I can understand better.</p>
  <p>Here is a <strong><a href="http://jsfiddle.net/vdjhbpew/" rel="nofollow noreferrer">FIDDLE</a></strong> of what I have tried-</p>