前回の質問でイベント移譲(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
ではなさそうです。