アタッチしている要素 とはなんですか

Question

event.currenttargetの説明文を読んでいると

自身にアタッチされているオブジェクトを返す
イベントハンドラーをアタッチした要素を返す　

と出てくるのですが、プログラム上のアタッチの意味を調べても全く見つかりません。

英語のattachの意味だと

付着した要、帰属した要素となるのですが抽象的過ぎてよくわかりません。

助けてください。

Answer 1

「イベントをアタッチした」は、「イベントをセットした」と同じような意味です。

昔、IEがaddEventListenerでなくattachEventというメソッドを使っていたことがあります。

Answer 2

プログラム上のアタッチの意味を調べて

イベント駆動の仕組みとして、どのような呼ばれ方をしているのかを確認してください。

• イベントリスナ（イベントハンドラ）を定義（addEventListener）することをアタッチ
• イベントリスナ（イベントハンドラ）を解除（removeEventListener）することをデタッチ

と呼ばれることがあります。

---

ご質問に挙げられたページ（Event.currentTarget）では、類似プロパティ（Event.target）の説明も併読します。
（event.target と event.currentTarget との違いに着目する）

• event.target ... イベントが発生した要素
• event.currentTarget ... イベントを定義（アタッチ）した要素

---

例）

<ul id="test">
  <li>hoge</li>
  <li>hogu</li>
</ul>

画面上の矩形を考えると、スタイル次第ですが、UL要素に click イベントを定義（アタッチ）しても、発生減は バブリングなどの特徴から LI 要素になることが確認できます。

window.addEventListener("DOMContentLoaded",()=>{

  // UL要素にclickイベントを定義（アタッチ）する。
  document.getElementById("test")
    .addEventListener("click", evt => {
      console.log( evt.target.textContent ); // "hoge", "hogu"
      console.log( evt.currentTarget.id ); // "test"
    });

});

event.target と event.currentTarget との違いが確認できます。

Comments

[dda]

定義した要素と影響を受ける要素の違いだったんですね。
わかりやすくて助かりました。
ありがとうございました！