イベントは、ユーザーのクリック、キーボードフォーカスリンク、およびフォームテキストの変更に応答するために使用されます。 JavaScriptの學(xué)習(xí)を始めたとき、複雑なイベントリスナーを書きました。最近、コードの量とリスナーの數(shù)を減らす方法を?qū)Wびました。

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

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

直感的なアプローチ

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

 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 = 'ドラッググリーン';
}）;

重複コードを削減します

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

関數(shù)プレビュー（色）{
  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'））;

これはより簡潔ですが、それでも複數(shù)の機(jī)能とイベントリスナーが必要です。

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

イベントオブジェクトは、リスナーを簡素化するための鍵です。イベントリスナーが呼び出されると、イベントオブジェクトも最初のパラメーターとして送信します。このオブジェクトには、イベントが発生したときなど、発生したイベントを説明するデータが含まれています。コードを簡素化するために、 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つの関數(shù)の代わりに1つの関數(shù)のみがあります。イベントリスナーとまったく同じ機(jī)能を再利用できますが、 evt.currentTarget.idは、イベントをトリガーした要素に応じて異なる値を持ちます。

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

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

トリガーされると、イベントはイベントの要素（正方形の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つだけに減らしました！より複雑なコードの場合、それはよりうまく機(jī)能します。イベントオブジェクトを活用して泡立てをすることで、JavaScriptイベントを制御し、イベントハンドラーのコードを簡素化できます。

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

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

ただし、通常、アプリケーションのボタンをクリックするユーザーに応答できるように、クリックイベントを聞きたいと考えています。クリックイベントは、ドキュメント內(nèi)の任意の要素に対して、大きな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）;

このコードをテストするときは、正方形をクリックするときではなく、「クリック」が添付されないことがあることに注意してください。それが機(jī)能しない理由は、各ブロックにクリック可能なものが含まれているからです<span></span>要素、ドラッグ可能ではありません<div>要素。 SPANにはIDセットがないため、 <code>evt.target.idプロパティは空の文字列です。コード內(nèi)の色付きの正方形のみを気にします。正方形のどこかをクリックすると、親の正方形の要素を見つける必要があります。 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を返す場合、ユーザーが色付きの正方形の外側(cè)のどこかにクリックすることを意味し、イベントを無視する必要があります。

その他の例

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

リスト

一般的なパターンは、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）;
}）;

バブルを活用することにより、コンテナで単一のイベントリスナーを使用できます。アプリケーションで多くの要素を作成すると、リスナーの數(shù)が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）;
}）;

結(jié)論は

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