JavaScriptによるイベントの変換

上のコードはボタンをクリックすることでactiveクラスを切り替えることができます.

Activeクラスがある場合は、色やサイズの変化に伴って回転するcssが適用されます.

ボタンは切り替えが完了する前に押下され、回転するケースでは回転が完了しないという問題がある.

この問題を解決するには、トランザクションが終了する前に発生したクリックイベントを無視する必要があります.

const box = document.querySelector('.box');
const button = document.querySelector('button');

const clickEvent = () => {
  button.onclick = null;
  box.textContent = '회전하는중';
  box.classList.toggle('active');
};

button.onclick = clickEvent;

box.ontransitionend = () => {
  box.textContent = '완료';
  button.onclick = clickEvent;
}

イベントが発生したらnullを割り当ててイベントハンドラを削除します.

transitiononedイベントが発生したときにイベントハンドラを再登録します.

これにより、最初にクリックしたイベントが発生した後に発生したクリックイベントは無視され、複数回クリックしたボタンはトランザクション終了後のクリックでのみ回転します.

const box = document.querySelector('.box');
const button = document.querySelector('button');
let isMoving = false;

button.onclick = () => {
  if (!isMoving) {
    box.textContent = '회전하는중';
    box.classList.toggle('active');
  }
  isMoving = true;
};

box.ontransitionend = () => {
  isMoving = false;
  box.textContent = '완료';
};

isMovingは、isMovingがfalseの場合にのみクラスを切り替える方法です.

我々のプロジェクトは第2の方法を採用した.

最初のメソッドを使用する場合、キーボードイベントも同様にイベントハンドラを削除して再登録する必要があるので、変数を使用する方が良いと思います.

isMoving変数名も使用されているため、コードの可読性も良好であると考えられる.

transitionプロパティはよく使用されますが、これらのイベントを知っていれば、開発時に役立つかもしれません.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

モダンJavaScript Deep Dive