Mousenter Update Button Content Event Listener fires multiple times

HTML

<p>
  When I update the content of the button (via innerHTML) the event listener fires like crazy while moving the mouse around <em>within</em> the button. If I don't update the button content the event listener fires like expected (once each time it enters).
</p>

<div id="box" style="">
</div>


<ul id="log"></ul>


<svg class="svg-definitions">
  <defs>
    <circle id="circle-background" cx="10" cy="10" r="10" fill="inherit" stroke="inherit" stroke-width="2" />
  </defs>

  <symbol id="icon-remove" viewBox="0 0 22 22">
    <title>Remove Tag From Resources</title>
    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
      <use xlink:href="#circle-background" fill="#C95C42" stroke="#C95C42" />
      <path fill="#FFF" d="M14.42 12.83c0-.18-.07-.37-.2-.5l-2.2-2.2 2.2-2.18c.13-.14.2-.32.2-.5 0-.2-.07-.38-.2-.5L13.2 5.9c-.13-.13-.32-.2-.5-.2-.2 0-.38.07-.5.2L10 8.12 7.8 5.9c-.12-.13-.3-.2-.5-.2-.18 0-.37.07-.5.2l-1 1.02c-.15.13-.22.32-.22.5 0 .2.07.37.2.5l2.2 2.2-2.2 2.2c-.13.12-.2.3-.2.5 0 .18.07.37.2.5l1.02 1c.13.15.32.22.5.22.2 0 .38-.07.5-.2l2.2-2.2 2.2 2.2c.12.13.3.2.5.2.18 0 .37-.07.5-.2l1-1.02c.15-.13.22-.32.22-.5z"
      />
    </g>
  </symbol>

  <symbol id="icon-added" viewBox="0 0 22 22">
    <title>Tag Added to Resources</title>
    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
      <use xlink:href="#circle-background" fill="#5DC942" stroke="#5DC942" />
      <path fill="#FFF" d="M16.11 7.008c0-.195-.08-.39-.22-.53l-1.06-1.065c-.14-.14-.336-.22-.53-.22-.196 0-.392.08-.532.22L8.64 10.547 6.345 8.242c-.14-.14-.336-.22-.53-.22-.197 0-.392.08-.533.22L4.22 9.305c-.142.14-.22.336-.22.53 0 .196.078.392.22.532l2.827 2.828 1.062 1.063c.14.14.333.22.53.22.194 0 .39-.08.53-.22l1.062-1.063L15.89 7.54c.14-.142.22-.337.22-.532z"
      />
    </g>
  </symbol>
</svg>

CSS

button {
  background-color: lightgray;
  border: none;
  padding: 0;
}

button svg {
  width: 22px;
  height: 22px;
}

JavaScript

var box = document.getElementById('box');
var button = document.createElement('button');
button.innerHTML = '<svg><use xlink:href="#icon-added"></use></svg>';

button.addEventListener('mouseenter', function() {
  document.getElementById('log').innerHTML += '<li>Mouseenter</li>';
  var iconHover = this.dataset.iconHover;
  //Comment out the following line to see expected behavior.
  this.innerHTML = '<svg><use xlink:href="#icon-remove"></use></svg>';
});

box.appendChild(button);