<h2>Events<a href="#events"></a></h2>
<p>Shuffle emits an event when a layout happens and when elements are removed. The event names are <code class="language-javascript">Shuffle.EventType.LAYOUT</code> and <code class="language-javascript">Shuffle.EventType.REMOVED</code>.</p>
<p>Shuffle uses the global <code>CustomEvent</code> to <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent">create events</a>. A polyfill for IE&lt;=11 is bundled with Shuffle.</p>

<h3>Get notified when a layout happens</h3>
<div class="code-block">
  <pre rel="JavaScript"><code class="language-javascript">element.addEventListener(Shuffle.EventType.LAYOUT, function () {
  console.log('Things finished moving!');
});</code></pre>
</div>


<h3>Do something when an item is removed</h3>
<div class="code-block">
  <pre rel="JavaScript"><code class="language-javascript">element.addEventListener(Shuffle.EventType.REMOVED, function (evt) {
  var detail = evt.detail;
  console.log(this, evt, detail.collection, detail.shuffle);
});</code></pre>
</div>

<p class="demo-link-container">Check out the <a href="#demo">demo</a> at the top of the page, or its <a href="/js/demos/homepage.js">JavaScript file.</a></p>
