Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/EventTarget/addEventListener below:

EventTarget: addEventListener() メソッド - Web API

Baseline Widely available *

メモ: この機能はウェブワーカー内で利用可能です。

addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

対象としてよくあるものは Element、Document、Window ですが、イベントに対応したあらゆるオブジェクトが対象になることができます（IDBRequest など）。

メモ: addEventListener() メソッドは、イベントリスナーを登録するための推奨される方法です。以下のような長所があります。

• 1 つのイベントに対して複数のハンドラーを追加することができます。これは、ライブラリーや JavaScript モジュール、あるいは他のライブラリーや拡張機能とうまく動作させる必要があるその他の種類のコードで特に有効です。
• onXYZ プロパティを使用するのとは対照的に、リスナーが起動されるときのフェーズ（キャプチャとバブリング）をより細かく制御できます。
• HTML や SVG の要素だけでなく、あらゆるイベントターゲットで動作します。

addEventListener() メソッドは、関数または handleEvent() 関数を実装したオブジェクトを、呼び出される EventTarget における指定されたイベント種別のイベントリスナーのリストに加えることで動作します。その関数やオブジェクトが既にターゲットのイベントリスナーのリストにあった場合は、その関数やオブジェクトが二重に追加されることはありません。

メモ: ある無名関数が特定のターゲットでイベントリスナーのリストに登録されており、後のコードで同じ無名関数が addEventListener の呼び出しに指定された場合、2 つ目の関数もそのターゲットのイベントリスナーのリストに追加されます。

実際、無名関数は、同じ変更のないソースコードで定義されて繰り返し呼び出されても、繰り返しの中でも同一にはなりません。

このような場合、同じ無名関数を繰り返し定義することは問題になることがあります。（後述のメモリーの問題を参照してください）。

イベントリスナーが他のリスナーの内部、つまりイベントの処理中に EventTarget に追加された場合、そのイベントが新しいリスナーを起動することはありません。 しかし、新しいリスナーは、バブリング中など、イベントフローの後の段階で呼び出されることがあります。

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

type

対象とするイベントの種類を表す文字列です。

listener

指定された種類のイベントが発生するときに通知（Event インターフェイスを実装しているオブジェクト）を受け取るオブジェクト。これは null であるか、handleEvent() メソッドのあるオブジェクトか、JavaScript の関数のいずれかでなければなりません。コールバックについて詳しくは、イベントリスナーのコールバックを参照してください。

options 省略可

対象のイベントリスナーの特性を指定する、オプションのオブジェクトです。 次のオプションが使用できます。

• capture 省略可

  • : 論理値で、この型のイベントが DOM ツリーで下に位置する EventTarget に配信 (dispatch) される前に、登録された listener に配信されることを示します。指定されていない場合は、既定で false になります。

• once 省略可

  • : 論理値で、 listener の呼び出しを一回のみのとしたいかどうかを値で指定します。 true を指定すると、 listener は一度実行された時に自動的に削除されます。指定されていない場合は、既定で false になります。

• passive 省略可

  • : 論理値で、true ならば、 listener で指定された関数が preventDefault() を呼び出さないことを示します。呼び出されたリスナーが preventDefault() を呼び出すと、ユーザーエージェントは何もせず、コンソールに警告を出力される可能性があります。

  このオプションが指定されていない場合、既定で false になります。ただし、Safari 以外のブラウザーでは、wheel、mousewheel、touchstart、touchmove の各イベントでは true になります。詳細はパッシブリスナーの使用をご覧ください。

• signal 省略可

  • : AbortSignal です。その AbortSignal を持つ AbortController オブジェクトの abort() メソッドが呼び出された時に、リスナーが削除されます。指定されてなかった場合は、AbortSignal がリスナーに関連付けられません。

useCapture 省略可

論理値で、この型のイベントが、DOM ツリー内の下の EventTarget に配信される前に、登録された listener に配信されるかどうかを示します。ツリーを上方向にバブリングしているイベントは、キャプチャを使用するように指定されたリスナーを起動しません。イベントのバブリングとキャプチャは、両方の要素がそのイベントのハンドラーを登録している場合に、別の要素内に入れ子になっている要素で発生するイベントを伝播する 2 つの方法です。イベント伝播モードは、要素がイベントを受け取る順番を決定します。詳細な説明は DOM Level 3 Events と JavaScript Event order を参照してください。 指定されていない場合、 useCapture は既定で false となります。

メモ: イベントターゲットに登録されたイベントリスナーは、キャプチャフェーズやバブリングフェーズではなく、ターゲットフェーズのイベントになります。 キャプチャフェーズのイベントリスナーは、ターゲットフェーズおよびバブリングフェーズのイベントリスナーの前に呼び出されます。

wantsUntrusted 省略可 非標準

Firefox (Gecko) 独自の引数です。true の場合、このリスナーはウェブコンテンツによって発行された合成イベント (カスタムイベント) を受け取ります (ブラウザーのクロームでは既定で false ですが、一般のウェブページでは true です)。この引数は、主にアドオンやブラウザー自身の役に立つものです。

なし (undefined)。

イベントリスナーには、コールバック関数または handleEvent() メソッドを持つオブジェクトのいずれかをコールバック関数として指定することができます。

コールバック関数自体は、 handleEvent() メソッドと同じ引数と返値を持ちます。つまり、コールバック関数は発生したイベントを説明する Event に基づくオブジェクトを唯一の引数として受け付け、何も返しません。

たとえば、次のイベントハンドラーコールバックは、 fullscreenchange および fullscreenerror の両方を処理するために使用することができます。

function handleEvent(event) {
  if (event.type === "fullscreenchange") {
    /* 全画面モードへの切り替えを処理 */
  } else {
    /* 全画面モードへの切り替えエラーを処理 */
  }
}

イベントハンドラーが発行された要素を参照することはよくあることで、似たような要素の設定に汎用ハンドラーを使用する場合などに便利です。

ハンドラー関数を addEventListener() を使用して要素に装着する場合、ハンドラー内の this の値は要素を参照します。ハンドラーに渡すイベント引数の currentTarget プロパティの値と同じになります。

my_element.addEventListener("click", function (e) {
  console.log(this.className); // my_element の className をログ出力
  console.log(e.currentTarget === this); // `true` をログ出力
});

注意点として、アロー関数は自分自身で this コンテキストを持つことはありません。

my_element.addEventListener("click", (e) => {
  console.log(this.className); // 警告: `this` は `my_element` ではない
  console.log(e.currentTarget === this); // `false` をログ出力
});

イベントハンドラー（例えば、onclick）が HTML ソースの要素に指定されている場合、属性値の JavaScript コードは実質的にハンドラー関数にラップされ、addEventListener() と整合する方法で this の値にバインドされます。コード内に this が現れた場合は、要素への参照を表します。

<table id="my_table" onclick="console.log(this.id);">
  <!-- `this` が table にバインドされ、'my_table' がログ出力される -->
  …
</table>

属性値内のコードによって呼び出された関数内の this の値は、標準ルール に従って動作することに注意してください。これは次の例で表示されます。

<script>
  function logID() {
    console.log(this.id);
  }
</script>
<table id="my_table" onclick="logID();">
  <!-- 呼び出された際、`this` はグローバルオブジェクトを指す -->
  …
</table>

logID() 内の this の値はグローバルオブジェクト Window への参照です（厳格モードの場合は undefined）。

Function.prototype.bind() メソッドを使用すると、修正された this コンテキストをその後のすべての呼び出しに使用することができます。ただし、リスナーへの参照を保持しておく必要があることに注意してください。

これは bind() を使用した例と使用しない例です。

class Something {
  name = "Something Good";
  constructor(element) {
    // bind によって、修正された `this` コンテキストを `onclick2` に代入される
    this.onclick2 = this.onclick2.bind(this);
    element.addEventListener("click", this.onclick1, false);
    element.addEventListener("click", this.onclick2, false); // Trick
  }
  onclick1(event) {
    console.log(this.name); // undefined（`this` が要素であるため）
  }
  onclick2(event) {
    console.log(this.name); // 'Something Good'（`this` が Something インターフェイスに結び付けられているため）
  }
}

const s = new Something(document.body);

もう一つの解決策は、handleEvent() と呼ばれる特別な関数を使用してイベントを捕捉することです。

class Something {
  name = "Something Good";
  constructor(element) {
    // この場合のリスナーは `this` であり、 this.handleEvent ではないことに注意
    element.addEventListener("click", this, false);
    element.addEventListener("dblclick", this, false);
  }
  handleEvent(event) {
    console.log(this.name); // 'Something Good'（新しく作成されたオブジェクトに結び付けられているため）
    switch (event.type) {
      case "click":
        // ここにいくらかのコード…
        break;
      case "dblclick":
        // ここにいくらかのコード…
        break;
    }
  }
}

const s = new Something(document.body);

this への参照を処理するもう一つの方法は、別個の this コンテキストを作成しないアロー関数を使用することです。

class SomeClass {
  name = "Something Good";

  register() {
    window.addEventListener("keydown", (e) => {
      this.someMethod(e);
    });
  }

  someMethod(e) {
    console.log(this.name);
    switch (e.code) {
      case "ArrowUp":
        // ここにいくらかのコード…
        break;
      case "ArrowDown":
        // ここにいくらかのコード…
        break;
    }
  }
}

const myObject = new SomeClass();
myObject.register();

イベントリスナーは Event または Event のサブクラスの引数を 1 つだけ取りますが、これは自動的にリスナーに渡され、返値は無視されます。 したがって、イベントリスナーにデータを取得したり、イベントリスナーからデータを取得したりするには、引数と返値でデータを渡すのではなく、代わりにクロージャを作成する必要があります。

イベントリスナーとして渡された関数は、その関数を格納する外部スコープで宣言されたすべての変数にアクセスすることができます。

const myButton = document.getElementById("my-button-id");
let someString = "Data";

myButton.addEventListener("click", () => {
  console.log(someString);
  // 最初のクリックでは 'Data' となり、
  // 2 番目のクリックでは 'Data Again' となる

  someString = "Data Again";
});

console.log(someString); // 期待される値: 'Data' （'Data Again' とはならない）

関数スコープに関する詳細情報は、関数ガイドをお読みください。

const elems = document.getElementsByTagName("*");

// ケース 1
for (const elem of elems) {
  elem.addEventListener(
    "click",
    (e) => {
      // 何かを行う
    },
    false,
  );
}

// ケース 2
function processEvent(e) {
  // 何かを行う
}

for (const elem of elems) {
  elem.addEventListener("click", processEvent, false);
}

上記の 1 つ目のケースでは、ループの繰り返しごとに新しい（無名の）ハンドラー関数が作成されます。一方、 2 つ目のケースでは、以前に宣言した同じ関数がイベントハンドラーとして使用され、作成されるハンドラー関数が 1 つであるため、メモリー消費量が少なくなります。さらに、最初のケースでは、無名関数への参照が保持されないため、 removeEventListener() を呼び出すことができません（ここでは、ループが生成する可能性がある複数の無名関数への参照が保持されません）。2 番目のケースでは、processEvent が関数の参照なので、myElement.removeEventListener("click", processEvent, false) を実行することが可能です。

実は、メモリー消費に関しては、関数参照を保持しないことが本当の問題ではなく、むしろ、静的な関数参照を保持しないことが問題なのです。

イベントに既定のアクションがある場合、例えば、既定でコンテナーをスクロールする wheel イベントの場合、イベントリスナーが Event.preventDefault() を呼び出して既定のアクションをキャンセルするかどうかを事前に知ることができないため、ブラウザーは一般的にイベントリスナーが完了するまで既定のアクションを開始することができません。イベントリスナーの実行に時間がかかりすぎると、既定のアクションが実行されるまでに、ジャンクと呼ばれる顕著な遅延が発生する可能性があります。

passive オプションを true に設定すると、イベントリスナーは既定のアクションを取り消さないことを宣言するため、ブラウザーはリスナーが完了するのを待たずに、既定のアクションをすぐに開始できます。リスナーが Event.preventDefault() を呼び出しても、効果はありません。

addEventListener() の仕様書では、passive オプションの既定値は常に false であると定義しています。しかし、パッシブリスナーのスクロールパフォーマンスの利点を古いコードで実現するために、最近のブラウザーでは wheel、mousewheel、touchstart、touchmove の各イベントの passive オプションの既定値が、文書レベルノード Window、Document、Document.body においては true に変更されています。これにより、イベントリスナーがイベントが取り消される可能性を防ぐことができるので、ユーザーがスクロールしている間にページのレンダリングをブロックすることはありません。

そのため、（既定値に頼らずに）その動作を上書きして passive オプションを確実に false にしたい場合は、明示的にこのオプションを false に設定する必要があります。

基本的な scroll イベントについて、passive の値を気にする必要はありません。 取り消される可能性がないため、イベントリスナーがページのレンダリングをブロックすることはありません。

パッシブリスナーの効果を示す例についてはパッシブリスナーによるスクロールの性能改善を参照してください。

この例は、要素上でのマウスクリックを監視するための addEventListener() の使い方を紹介します。

<table id="outside">
  <tr>
    <td id="t1">one</td>
  </tr>
  <tr>
    <td id="t2">two</td>
  </tr>
</table>

// t2 の内容を変更する関数
function modifyText() {
  const t2 = document.getElementById("t2");
  const isNodeThree = t2.firstChild.nodeValue === "three";
  t2.firstChild.nodeValue = isNodeThree ? "two" : "three";
}

// イベントリスナーを table に追加
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

このコードの中で、 modifyText() は click イベントのリスナーであり、addEventListener() を使用して登録されています。表の中のどこかをクリックすると、ハンドラーまでバブリングし、modifyText() が実行されます。

この例では、 addEventListener() で AbortSignal による中断ができるリスナーを追加する方法を実演しています。

<table id="outside">
  <tr>
    <td id="t1">one</td>
  </tr>
  <tr>
    <td id="t2">two</td>
  </tr>
</table>

// 中断可能なリスナーを table に追加
const controller = new AbortController();
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, { signal: controller.signal });

// t2 の内容を変更する関数
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue === "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
    controller.abort(); // "three" になったらリスナーを削除
  }
}

上の例では、2 行目のコンテンツが "three" に変更された後に、 addEventListener() の呼び出しに渡した AbortController から abort() を呼び出すように、前回のコードを変更しています。その結果、クリックイベントを待ち受けするコードがなくなったので、値は永遠に "three" のままとなります。

ここで、無名関数を使用してイベントリスナーに引数を渡す方法を見てみましょう。

<table id="outside">
  <tr>
    <td id="t1">one</td>
  </tr>
  <tr>
    <td id="t2">two</td>
  </tr>
</table>

// t2 のコンテンツを変更する関数
function modifyText(new_text) {
  const t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;
}

// イベントリスナーを table に追加する関数
const el = document.getElementById("outside");
el.addEventListener(
  "click",
  function () {
    modifyText("four");
  },
  false,
);

なお、リスナーは実際にイベントに応答する modifyText() 関数に引数を送信することができるコードをカプセル化している無名関数であることに注意してください。

この例はアロー関数記法を使用して実装されたイベントリスナーを紹介しています。

<table id="outside">
  <tr>
    <td id="t1">one</td>
  </tr>
  <tr>
    <td id="t2">two</td>
  </tr>
</table>

// t2 の中身を変更するための関数
function modifyText(new_text) {
  const t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;
}

// アロー関数で table にイベントリスナーを追加
const el = document.getElementById("outside");
el.addEventListener(
  "click",
  () => {
    modifyText("four");
  },
  false,
);

なお、無名関数とアロー関数は似ており、違いは this を結び付けるかどうかです。無名関数（および従来のすべての JavaScript 関数）は固有の this を作成するのに対し、アロー関数はそれを含む関数の this を継承します。

つまり、アロー関数を使用したときは、それを含む関数の変数や定数をイベントハンドラーで利用することができます。

<div class="outer">
  outer, once & none-once
  <div class="middle" target="_blank">
    middle, capture & none-capture
    <a class="inner1" href="https://www.mozilla.org" target="_blank">
      inner1, パッシブ & preventDefault（許可されていない）
    </a>
    <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
      inner2, パッシブ & preventDefault（新しいページを開かない）
    </a>
  </div>
</div>
<hr />
<button class="clear-button">ログをクリア</button>
<section class="demo-logs"></section>

.outer,
.middle,
.inner1,
.inner2 {
  display: block;
  width: 520px;
  padding: 15px;
  margin: 15px;
  text-decoration: none;
}
.outer {
  border: 1px solid red;
  color: red;
}
.middle {
  border: 1px solid green;
  color: green;
  width: 460px;
}
.inner1,
.inner2 {
  border: 1px solid purple;
  color: purple;
  width: 400px;
}

.demo-logs {
  width: 530px;
  height: 16rem;
  background-color: #ddd;
  overflow-x: auto;
  padding: 1rem;
}

const clearBtn = document.querySelector(".clear-button");
const demoLogs = document.querySelector(".demo-logs");

function log(msg) {
  demoLogs.innerText += `${msg}\n`;
}

clearBtn.addEventListener("click", () => {
  demoLogs.innerText = "";
});

const outer = document.querySelector(".outer");
const middle = document.querySelector(".middle");
const inner1 = document.querySelector(".inner1");
const inner2 = document.querySelector(".inner2");

const capture = {
  capture: true,
};
const noneCapture = {
  capture: false,
};
const once = {
  once: true,
};
const noneOnce = {
  once: false,
};
const passive = {
  passive: true,
};
const nonePassive = {
  passive: false,
};

outer.addEventListener("click", onceHandler, once);
outer.addEventListener("click", noneOnceHandler, noneOnce);
middle.addEventListener("click", captureHandler, capture);
middle.addEventListener("click", noneCaptureHandler, noneCapture);
inner1.addEventListener("click", passiveHandler, passive);
inner2.addEventListener("click", nonePassiveHandler, nonePassive);

function onceHandler(event) {
  log("outer、once");
}
function noneOnceHandler(event) {
  log("outer、非 once、既定値\n");
}
function captureHandler(event) {
  //event.stopImmediatePropagation();
  log("middle、capture");
}
function noneCaptureHandler(event) {
  log("middle、非 capture、既定値");
}
function passiveHandler(event) {
  // パッシブイベントリスナーの呼び出しの中では preventDefault は実行できない
  event.preventDefault();
  log("inner1、passive、新しいページを開く");
}
function nonePassiveHandler(event) {
  event.preventDefault();
  //event.stopPropagation();
  log("inner2、非 passive、既定値、新しいページを開かない");
}

外側、中央、内側のコンテナーをそれぞれクリックして、オプションがどのように動作するかを確認してください。

引数の options には複数のオプションを設定することができます。次の例では、2 つのオプションを設定しています。

• passive: ハンドラーが preventDefault() を呼び出さないことを示します。
• once: イベントハンドラーが一度だけしか呼び出されないことを保証します。

<button id="example-button">このボタンはクリックされていません。</button>
<button id="reset-button">このボタンをクリックすると、最初のボタンがリセットされます。</button>

const buttonToBeClicked = document.getElementById("example-button");

const resetButton = document.getElementById("reset-button");

// ボタンの初期化テキスト
const initialText = buttonToBeClicked.textContent;

// ボタンがクリックされた後の内容のテキスト
const clickedText = "このボタンがクリックされました。";

// イベントリスナーのコールバック関数は、リスナーが重複して装着されるのを防ぐため
// イベントリスナーのコールバック関数を巻き上げしています。
function eventListener() {
  buttonToBeClicked.textContent = clickedText;
}

function addListener() {
  buttonToBeClicked.addEventListener("click", eventListener, {
    passive: true,
    once: true,
  });
}

// リセットボタンがクリックされると、例えばボタンがリセットされ、
// その状態が再び更新されるようにします。
resetButton.addEventListener("click", () => {
  buttonToBeClicked.textContent = initialText;
  addListener();
});

addListener();

次の例は passive を設定した効果を示しています。テキストとチェックボックスを含む <div> があります。

<div id="container">
  <p>
    But down there it would be dark now, and not the lovely lighted aquarium she
    imagined it to be during the daylight hours, eddying with schools of tiny,
    delicate animals floating and dancing slowly to their own serene currents
    and creating the look of a living painting. That was wrong, in any case. The
    ocean was different from an aquarium, which was an artificial environment.
    The ocean was a world. And a world is not art. Dorothy thought about the
    living things that moved in that world: large, ruthless and hungry. Like us
    up here.
  </p>
</div>

<div>
  <input type="checkbox" id="passive" name="passive" checked />
  <label for="passive">パッシブ</label>
</div>

#container {
  width: 150px;
  height: 200px;
  overflow: scroll;
  margin: 2rem 0;
  padding: 0.4rem;
  border: 1px solid black;
}

このコードは、コンテナーの wheel イベントにリスナーを追加するもので、既定ではコンテナーをスクロールします。リスナーは長時間実行する処理を実行します。初期状態では、リスナーは passive オプションで追加され、チェックボックスがトグル切り替えされるたびに、コードは passive オプションをトグル切り替えします。

const passive = document.querySelector("#passive");
passive.addEventListener("change", (event) => {
  container.removeEventListener("wheel", wheelHandler);
  container.addEventListener("wheel", wheelHandler, {
    passive: passive.checked,
    once: true,
  });
});

const container = document.querySelector("#container");
container.addEventListener("wheel", wheelHandler, {
  passive: true,
  once: true,
});

function wheelHandler() {
  function isPrime(n) {
    for (let c = 2; c <= Math.sqrt(n); ++c) {
      if (n % c === 0) {
        return false;
      }
    }
    return true;
  }

  const quota = 1000000;
  const primes = [];
  const maximum = 1000000;

  while (primes.length < quota) {
    const candidate = Math.floor(Math.random() * (maximum + 1));
    if (isPrime(candidate)) {
      primes.push(candidate);
    }
  }

  console.log(primes);
}

効果は次の通りです。

• 初期状態では、リスナーはパッシブであるため、ホイールでコンテナーをスクロールしようとするとすぐにスクロールします。
• 「パッシブ」のチェックを外して、ホイールを使用してコンテナーをスクロールしようとすると、コンテナーがスクロールするまでに顕著な遅延があります。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4