title: Why doesn't onanimationend work in my code, but addEventListener("animationend") does?
body: <p>I'm trying to remove an element once its fade animation has ended. Adding a listener to the <code>animationend</code> event works fine, but assigning the handler to <code>.onanimationend</code> doesn't - the function does not fire when the animation ends. Why doesn't the <code>on-</code> handler work?</p>
  
  <p>I'm running the code on FF 48, but the problem also occurs on Chrome 71.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const post = document.querySelector('.post');
  const hideButton = post.children[0];
  
  // When hide button is clicked, run fade animation.
  hideButton.onclick = function() {
    post.style.animationPlayState = "running";
  };
  
  // This function runs
  post.addEventListener("animationend", function() {
    console.log('animationend listener running');
    // this.remove();
  });
  
  // This function doesn't run
  post.onanimationend = function() {
    console.log('onanimationend handler running');
    // this.remove();
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes hide {
    0% {
      opacity: 1;
      height: 100%;
      margin: 10px 0;
      padding: 15px;
    }
    75% {
      opacity: 0;
      height: 100%;
      margin: 10px 0;
      padding: 15px;
    }
    100% {
      opacity: 0;
      height: 0px;
      margin: 0px;
      padding: 0px;
    }
  }
  
  .post {
    background-color: #80ff00;
    margin: 10px 0;
    padding: 15px;
    animation-name: hide;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="post"&gt;
    Post
    &lt;button class="hide"&gt;
      Hide
    &lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>