Mousenter事件侦听器在元素内移动鼠标时触发多次，但仅在更新innerHTML时触发

在我的代码中，我尝试在mouseenter事件上更新按钮的innerHTML。

我希望每次鼠标移入元素时都会触发该事件，但是当鼠标在元素内移动时，事件侦听器将触发多次。如果删除在事件监听器中更新innerHTML的行，则会得到预期的行为。

为什么会这样，我该如何解决？请参见下面的代码和链接的JSFiddle。

https://jsfiddle.net/h7gsv69m/2/

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);