addEventListener() を showClock 関数の中に入れてみましたが、
同様の結果が得られました。

この関数の中に入れた方が自然に思ったのですが、関数の外に置くのとでは違いがあるのでしょうか？

function showClock() {
  timeoutId = setTimeout(() => {
    pElement.textContent = new Date();
    showClock();
  }, 1000);
  buttonElement.addEventListener("click", () => {
    clearTimeout(timeoutId);
  });
}