イベントハンドラーを単純化する背後にある考え方

イベントは、ユーザーのクリック、キーボードフォーカスリンク、およびフォームテキストの変更に応答するために使用されます。 JavaScriptの学習を始めたとき、複雑なイベントリスナーを書きました。最近、コードの量とリスナーの数を減らす方法を学びました。

簡単な例：いくつかのドラッグ可能なブロックから始めましょう。ドラッグした色付きの正方形をユーザーに見せたいと思います。

<div draggable="true">
    r
  </div>
  <div draggable="true">
    y
  </div>
  <div draggable="true">
    g
  </div>
<p>ブロックをドラッグします</p>

直感的なアプローチ

JavaScriptイベントの学習を始めたとき、各要素の別のイベントリスナー関数を書きました。これは一般的なパターンです。これは、開始する最も簡単な方法だからです。各要素が特定の動作を持たせたいので、各要素に特定のコードを使用できます。

 document.QuerySelector（ '＃red'）。AddEventListener（ 'dragstart'、evt => {
  document.queryselector（ '＃dragged'）。textContent = 'ドラッグレッド';
}）;

document.QuerySelector（ '＃Yellow'）。AddEventListener（ 'dragstart'、evt => {
  document.queryselector（ '＃dragged'）。textcontent = 'dragged yellow';
}）;

document.queryselector（ '＃green'）。AddEventListener（ 'dragstart'、evt => {
  document.queryselector（ '＃dragged'）。textContent = 'ドラッググリーン';
}）;

重複コードを削減します

この例のイベントリスナーは非常に似ています。各関数にはいくつかのテキストが表示されます。この重複コードは、ヘルパー関数に崩壊する可能性があります。

関数プレビュー（色）{
  document.queryselector（ '＃dragged'）。textContent = `ドラッグ$ {color}`;
}

書類
  .QuerySelector（ '＃RED'）
  .addeventListener（ 'dragstart'、evt => preview（ 'red'））;
書類
  .QuerySelector（ '＃Yellow'）
  .addeventListener（ 'dragstart'、evt => preview（ 'Yellow'））;
書類
  .QuerySelector（ '＃green'）
  .addeventListener（ 'dragstart'、evt => preview（ 'green'））;

これはより簡潔ですが、それでも複数の機能とイベントリスナーが必要です。

イベントオブジェクトを活用します

イベントオブジェクトは、リスナーを簡素化するための鍵です。イベントリスナーが呼び出されると、イベントオブジェクトも最初のパラメーターとして送信します。このオブジェクトには、イベントが発生したときなど、発生したイベントを説明するデータが含まれています。コードを簡素化するために、 evt.currentTargetプロパティを使用できます。CurrentTarget currentTarget 、イベントリスナーを添付する要素を参照します。この例では、3つの色の正方形の1つになります。

 const preview = evt => {
  const color = evt.currenttarget.id;
  document.queryselector（ '＃dragged'）。textContent = `ドラッグ$ {color}`;
};

document.queryselector（ '＃red'）。AddEventListener（ 'dragstart'、preview）;
document.QuerySelector（ '＃Yellow'）。AddEventListener（ 'Dragstart'、Preview）;
document.queryselector（ '＃green'）。AddEventListener（ 'dragstart'、preview）;

これで、4つの関数の代わりに1つの関数のみがあります。イベントリスナーとまったく同じ機能を再利用できますが、 evt.currentTarget.idは、イベントをトリガーした要素に応じて異なる値を持ちます。

イベントバブルを使用します

最後の変更は、コード内の行の数を減らすことです。イベントリスナーを各ブロックに添付するのではなく、すべての色のブロックを含む要素に単一のイベントリスナーを添付します。

トリガーされると、イベントはイベントの要素（正方形の1つ）から始まります。ただし、そこで止まりません。ブラウザは、要素の各親要素に移動し、任意のイベントリスナーを呼び出します。これはドキュメントのルート要素に続きます（HTMLでラベル）。このプロセスは「バブル」と呼ばれます。これは、イベントがドキュメントツリーにバブルのように上昇するためです。イベントリスナーをセクション要素に取り付けると、フォーカスイベントがドラッグされた色の正方形から親要素に泡立ちます。また、イベントリスナー（ section要素）を接続する要素の代わりに、イベント（正方形の1つ）をトリガーする要素を含むevt.targetプロパティを利用することもできます。

 const preview = evt => {
  const color = evt.target.id;
  document.queryselector（ '＃dragged'）。textContent = `ドラッグ$ {color}`;
};

document.queryselector（ 'section'）。AddEventListener（ 'dragstart'、preview）;

今、私たちは多くのイベントリスナーを1つだけに減らしました！より複雑なコードの場合、それはよりうまく機能します。イベントオブジェクトを活用して泡立てをすることで、JavaScriptイベントを制御し、イベントハンドラーのコードを簡素化できます。

クリックイベントはどうですか？

evt.target 、 dragstartやchangeなどのイベントで非常に効果的です。このイベントでは、フォーカスまたは変更入力を受け取ることができる要素はごくわずかです。

ただし、通常、アプリケーションのボタンをクリックするユーザーに応答できるように、クリックイベントを聞きたいと考えています。クリックイベントは、ドキュメント内の任意の要素に対して、大きなdivから小さなスパンまでトリガーされます。

ドラッグ可能な色の正方形をクリック可能に変更しましょう。

<div draggable="true">
    r
  </div>
  <div draggable="true">
    y
  </div>
  <div draggable="true">
    g
  </div>
<p>正方形をクリックします</p>

const preview = evt => {
  const color = evt.target.id;
  document.querySelector（ '＃clicked'）。textContent = `clicked $ {color}`;
};

document.queryselector（ 'section'）。addeventlistener（ 'click'、preview）;

このコードをテストするときは、正方形をクリックするときではなく、「クリック」が添付されないことがあることに注意してください。それが機能しない理由は、各ブロックにクリック可能なものが含まれているからです<span></span>要素、ドラッグ可能ではありません<div>要素。 SPANにはIDセットがないため、 <code>evt.target.idプロパティは空の文字列です。コード内の色付きの正方形のみを気にします。正方形のどこかをクリックすると、親の正方形の要素を見つける必要があります。 element.closest()を使用して、クリックされた要素に最も近い親要素を見つけることができます。

 const preview = evt => {
  const element = evt.target.closest（ 'div [draggable]'）;
  if（element！= null）{
    const color = element.id;
    document.querySelector（ '＃clicked'）。textContent = `clicked $ {color}`;
  }
};

これで、クリックイベントに単一のリスナーを使用できます！ element.closest()がnullを返す場合、ユーザーが色付きの正方形の外側のどこかにクリックすることを意味し、イベントを無視する必要があります。

その他の例

単一のイベントリスナーを利用する方法を示す他の例を以下に示します。

リスト

一般的なパターンは、JavaScriptを使用して新しいプロジェクトが動的に挿入されるプロジェクトのインタラクティブなリストを持つことです。イベントリスナーを各プロジェクトに添付する場合、新しい要素が生成されるたびに、コードはイベントリスナーを処理する必要があります。

<div id="buttons-container"></div>
<button id="add">新しいボタンを追加します</button>

buttoncounter = 0;
document.queryselector（ '＃add'）。AddEventListener（ 'click'、evt => {
  const newbutton = document.createelement（ 'button'）;
  newbutton.TextContent = buttonCounter;

  //「新しいボタンの追加」newbutton.addeventListener（ 'click'、evt => {をクリックするたびに、新しいイベントリスナーを作成します。

    //クリックしたら、クリックするボタンの番号を記録します。
    document.queryselector（ '＃clicked'）。textcontent = `クリックボタン＃$ {newbutton.textContent}`;
  }）;

  ButtonCounter;

  const container = document.queryselector（ '＃bottons-container'）;
  Container.AppendChild（Newbutton）;
}）;

バブルを活用することにより、コンテナで単一のイベントリスナーを使用できます。アプリケーションで多くの要素を作成すると、リスナーの数がNから2に減少します。

 buttoncounter = 0;
const container = document.queryselector（ '＃bottons-container'）;
document.queryselector（ '＃add'）。AddEventListener（ 'click'、evt => {
  const newbutton = document.createelement（ 'button'）;
  newbutton.dataset.number = buttoncounter;
  ButtonCounter;

  Container.AppendChild（Newbutton）;
}）;
container.addeventlistener（ 'click'、evt => {
  const clickedbutton = evt.target.closest（ 'button'）;
  if（clickedbutton！= null）{
    //クリックしたら、クリックするボタンの番号を記録します。
    document.queryselector（ '＃clicked'）。textcontent = `クリックボタン＃$ {clickedbutton.dataset.number}`;
  }
}）;

形状

たぶん、多くの入力を備えたフォームがあり、すべてのユーザー応答を単一のオブジェクトに収集したいと考えています。

名前：
郵便：
パスワード：

応答= {
  名前： ''、
  メール： ''、
  パスワード： ''
};

書類
  .QuerySelector（ 'input [name = "name"]'）
  .addeventlistener（ 'change'、evt => {
    const inputelement = document.queryselector（ 'input [name = "name"]'）;
    responses.name = inputelement.value;
    document.queryselector（ '＃preview'）。textcontent = json.stringify（responses）;
  }）;
書類
  .QuerySelector（ 'input [name = "email"]'）
  .addeventlistener（ 'change'、evt => {
    const inputelement = document.querySelector（ 'input [name = "email"]'）;
    Responses.Email = inputelement.value;
    document.queryselector（ '＃preview'）。textcontent = json.stringify（responses）;
  }）;
書類
  .QuerySelector（ 'input [name = "password"]'）
  .addeventlistener（ 'change'、evt => {
    const inputelement = document.queryselector（ 'input [name = "password"]'）;
    responses.password = inputelement.value;
    document.queryselector（ '＃preview'）。textcontent = json.stringify（responses）;
  }）;

代わりに親を使用しましょう<form></form>要素上の単一のリスナー。

応答= {
  名前： ''、
  メール： ''、
  パスワード： ''
};

document.QuerySelector（ 'form'）。AddEventListener（ 'change'、evt => {
  応答[evt.target.name] = evt.target.value;
  document.queryselector（ '＃preview'）。textcontent = json.stringify（responses）;
}）;

結論は

これで、イベントのバブルとイベントオブジェクトを活用して複雑なイベントハンドラーのカオスをいくつかに簡素化する方法を知っています。この記事が、新しい観点からイベントハンドラーについて考えるのに役立つことを願っています。私の初期の開発キャリアで同じことをするために重複コードを書くのに多くの時間を費やした後、それは私にとって啓示でした。