72179


前回の質問でイベント移譲(Event delegation)と言う概念を教えて頂きました。  
[addEventListnerをページ更新後に追加される要素にも適応したい。](https://ja.stackoverflow.com/questions/71869/addeventlistner%E3%82%92%E3%83%9A%E3%83%BC%E3%82%B8%E6%9B%B4%E6%96%B0%E5%BE%8C%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%82%8B%E8%A6%81%E7%B4%A0%E3%81%AB%E3%82%82%E9%81%A9%E5%BF%9C%E3%81%97%E3%81%9F%E3%81%84/71875#71875)

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

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

[ドキュメント](https://ja.javascript.info/event-
delegation)では`event`で取得しています。とても混乱しています。

[code]

    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);
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 4.0
2020-11-22T06:04:21.490
72143
2020-11-29T16:50:13.523
2020-11-22T06:29:44.970
22565
22565
question
javascript html
イベント移譲(Event delegation)の引数eventが何処から来るのか知りたい。


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

  * 関数の引数なので、名前は `event` でも `elm` でも何でもよいです。しかし`elm`は`Element`型かと誤解を招きそうなのでやめたほうがよいでしょう。
  * イベントの種類によって、引数の型が変わります。たとえば `"blur"`イベントの場合には[`FocusEvent`](https://w3c.github.io/uievents/#interface-focusevent)型のオブジェクトが渡されます。


CC BY-SA 4.0
2020-11-24T09:48:02.207
72179
2020-11-24T09:48:02.207
3475
72143
answer


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


CC BY-SA 4.0
2020-11-29T16:50:13.523
72276
2020-11-29T16:50:13.523
42929
72143
answer