0

前回の質問でイベント移譲(Event delegation)と言う概念を教えて頂きました。
addEventListnerをページ更新後に追加される要素にも適応したい。

質問
それで 下記のコードにあるdocument.querySelector(".dlcardWrap").addEventListener("blur", function (elm) の引数 elmが何処から来ているのか不思議でたまらないです。おそらく .dlcardWrapが代入されていると考えているのですが、 elm を宣言した構文が見当たらないので addEventListenerの機能で左側においた要素は引数で取得出来る等の仕様なのでしょうか?
addEventListenerでは勝手に第一引数には左側の要素が入るのでしょうか?
とても不思議です。詳しい方教えて頂けると大変助かります。よろしくお願いします。

要素.addEventListener(イベント, 関数, オプション);基本はこの形だったと思います。

ドキュメントではeventで取得しています。とても混乱しています。

document.querySelector("button").addEventListener("click", function () {
  const dlcardWrap = document.querySelector(".dlcardWrap");
  const template = document.querySelector("template");
  const clone = template.content.firstElementChild.cloneNode(true);
  clone.querySelector(".dlcard__title").textContent = "追加されたボタン";
  dlcardWrap.appendChild(clone);
}, false);


document.querySelector(".dlcardWrap").addEventListener("blur", function (elm) {
  console.log(elm);
  const input = elm.target;
  if (input.parentElement.classList.contains("dlcard__url")) {
    console.log(`入力されたURL: ${input.value}`);
    // 画像の取得処理など。
  }
}, true);
<div class="dlcardWrap">
  <div class="dlcard">
    <div class="dlcard__title">テスト</div>
    <div class="dlcard__thumbnail"><img src="#" alt=""></div>
    <div class="dlcard__url"><input type="url" name="url01" size="18" placeholder="URL:https://"></div>
  </div>
  <div class="dlcard">
    <div class="dlcard__title">テスト</div>
    <div class="dlcard__thumbnail"><img src="#" alt=""></div>
    <div class="dlcard__url"><input type="url" name="url01" size="18" placeholder="URL:https://"></div>
  </div>
</div>

<button type="button">追加</button>

<template>
  <div class="dlcard">
    <div class="dlcard__title">テスト</div>
    <div class="dlcard__thumbnail"><img src="#" alt=""></div>
    <div class="dlcard__url"><input type="url" name="url01" size="18" placeholder="URL:https://"></div>
  </div>
</template>

追記
console.log(elm)で中身をみてみたのですが、たくさん何かが表示されてなんなのか分からないです。思ってた要素.dlcardWrapではなさそうです。

2 件の回答 2

1

イベント移譲かどうかに関わらず、addEventLisetner()に渡すコールバック関数が呼ばれるときには常にEvent型(もしくはEventから派生したインタフェイス)のオブジェクトが引数として渡されます。この引数を用意するのは、ブラウザです。

  • 関数の引数なので、名前は event でも elm でも何でもよいです。しかしelmElement型かと誤解を招きそうなのでやめたほうがよいでしょう。
  • イベントの種類によって、引数の型が変わります。たとえば "blur"イベントの場合にはFocusEvent型のオブジェクトが渡されます。
1
  • 関数の仕様なのですね。ありがとうございます。
    – wataru
    2020年11月24日 12:39
0

document.querySelectorは、パラメータに含まれるクラスやIDなどに一致するhtml要素を返します。 htmlelement自体にはさまざまな関数があり、そのうちの1つがaddEventListenerです。この関数は、v8または他のブラウザエンジンなどのネイティブコードによって定義されます。このコードは、ページ上のEventオブジェクトが起動されるのを待ちます(何かをクリックしたり、マウスを動かしたりするたびに自動的に発生します)。 addeventlistenerが取得され、その「タイプ」が最初の引数として入力された文字列に対応する親オブジェクトに一致します

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。