如果元素在之后更新，事件侦听器不会触发

Question

我在vanilla JS中编写了一些自定义音频控件。一切都按预期工作，除了一件事。

首先，我的方法：我有一个音频元素，当选择不同的歌曲时，我暂停音频，更新音频元素的源，然后运行load（）和play（）。

我有音频元素的事件监听器：

audioElem.addEventListener('ended',updatePlayIcon);
audioElem.addEventListener('pause',updatePlayIcon);
audioElem.addEventListener('playing',updatePlayIcon);

我发现暂停事件不会在我之后立即更新音频元素的情况下触发。我根本不明白。

最好只看一下这个网站。 http://joshblackburn-gregorythebold.rhcloud.com/albums

我必须在我的函数playTrack（）中添加对updatePlayIcon（）的显式调用，因为audo元素的pause方法没有触发事件监听器。

如果它更有帮助，我可以写一个显示问题的最小例子。

我的问题是这个。如果我在pause（）方法之后更新音频元素，为什么不触发事件侦听器？

这是一个更简单的问题演示。

var tracks = ['https://upload.wikimedia.org/wikipedia/en/f/f8/Stipa_demo.ogg', 'https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg', 'https://upload.wikimedia.org/wikipedia/commons/f/f2/Median_test.ogg'];
audioContainer = document.getElementById('audio-container');
var audioElem = document.createElement('audio');
audioElem.controls = true;
audioElem.preload = "none";
var oggSource = document.createElement('source');
oggSource.type = "audio/ogg";
oggSource.src = tracks[0];
audioElem.appendChild(oggSource);
audioContainer.appendChild(audioElem);
var icon = document.getElementById('icon');


var getListItemByTrack = function(track) {
  return document.querySelector('li a[data-track="' + track + '"]');
};

audioElem.addEventListener('pause', function() {
  icon.innerHTML = "Paused";
  console.log(audioElem.dataset.track);
  getListItemByTrack(audioElem.dataset.track).className = "playLink paused";
});
audioElem.addEventListener('playing', function() {
  icon.innerHTML = "Playing";
  console.log(audioElem.dataset.track);
  getListItemByTrack(audioElem.dataset.track).className = "playLink playing";
});

var togglePlayPause = function() {
  var trackToPlay = this.dataset.track;
  var trackPlaying = audioElem.dataset.track;
  if (trackToPlay == trackPlaying) {
    if (audioElem.paused) {
      audioElem.play();
    } else {
      audioElem.pause();
    }
  } else {
    audioElem.pause();
    audioElem.dataset.track = this.dataset.track;
    oggSource.src = tracks[parseInt(audioElem.dataset.track)]
    audioElem.load();
    audioElem.play();
  }
};
var playLinks = document.getElementsByClassName("playLink");
for (var i = 0; i < playLinks.length; i++) {
  playLinks[i].addEventListener('click', togglePlayPause);
};

.playLink {
  cursor: pointer;
}

.playing::after {
  content: " : playing";
}

.paused::after {
  content: " : paused";
}

<div id="audio-container">
</div>
<div id="icon" class="material-icons">
  Ready
</div>
<ol>
  <li><a data-track="0" class="playLink">Play Track 1</a></li>
  <li><a data-track="1" class="playLink">Play Track 2</a></li>
  <li><a data-track="2" class="playLink">Play Track 3</a></li>
</ol>

如果单击音轨1进行播放，则可以继续单击它以切换播放/暂停，并触发音频元素上的暂停事件侦听器，更新列表项的类（以及为此后的文本）。

但是，如果您单击音轨1，并且在播放时，单击音轨2，它将播放音轨2，但是音轨1永远不会更新为暂停，即使对音频元素执行了pause（）方法。事件监听器没有触发！