javascriptでHTMLのimg要素を作成した際に、イベントリスナーを追加する方法。

Question

javascriptを使用して以下のようなwebアプリを作りました。
・ボールの画像をドラック＆ドロップすることで画面上どこでも移動することができる。
・ただし、ドロップした背後にゴールの画像があった場合は、ボールの画像を削除する。
(https://jsfiddle.net/h87cLvfn/11/)

現在、このアプリを改修し
ボールの画像の上でクリックしたら、ボールの画像を複製して
複製した画像側でドラック＆ドロップで画面上移動&ドロップした背後にゴールの画像があった場合は複製した画像を削除できるようにしたいです。

クリックした際にボールを複製するやり方はわかったのですが、
その複製した画像にイベントリスナーや関数を設定する方法が分かりません。

ご存じの方がいらっしゃいましたら、教えていただけないでしょうか。
以上、よろしくお願いします。

Comments

[m.ts10806]

タイトルと内容が合ってませんよ。
複製できる方法が分かっているのならこのタイトルは解決したことを聴こうとしています

[shum]

確かにそうですね、変えます。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

イベントバブリング

複製したimg要素でイベントを捕まえるよりも、img要素の親要素or祖先要素でイベントを捕まえる方が、img要素の追加/削除の度に addEventListener を実行しなくて良い分、便利ではありませんか。

• 三章第三回　イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net

キャプチャリング

それがバブルしないイベントなら、キャプチャリングフェーズで捕まえれば良いと思います。

• 三章第四回　イベントキャプチャリング — JavaScript初級者から中級者になろう — uhyohyo.net

Re: shum さん

Comments

[shum]

大変参考になる記事ありがとうございました。
バブリングとキャプチャリングについてはまだ理解できていなかったのですが、実装しながら試してみて理解が深まりました。

Answer 2

その複製した画像にイベントリスナーや関数を設定する方法が分かりません。

複製後にイベントリスナーや関数を当てれば良い話では。
[JavaScript 動的　イベント]とかで調べると出るはず。

Comments

[shum]

回答ありがとうございます！
自分が検索した際に”動的”という言葉が足りなかったようです。
助かりました。

Answer 3

// なんやかんやで複製した画像の取得
let cloneImg = なんやかんやで取得した画像が入った変数.cloneNode(true);

cloneImg.addEventListener('当てたいイベント名', function(){
  // 各処理
});

// なお上記は、"なんやかんやで取得した画像"と同じスコープか、thisや引数で、"なんやかんやで取得した画像"を捕捉できるようにしておかなければいけない。

Comments

[shum]

この方法で試してみても実装できました。
ご親切ありがとうございました！