画像を添付して削除したあとに、再度添付すると、loadイベントが複数回走る

Question

現在上記タグの技術を使って画像表示処理を実装しています。

ローカルフォルダから画像を選択し、
それを画面上に表示する仕組みです。
filereaderクラスを使っています。

その画像表示の際、画像の大きさに合わせて表示しているモーダルの大きさを調節するために、
loadイベントを使って、
「画像が添付されたら、モーダルの大きさを調節する」処理を入れています。
画像の表示領域にloadイベントハンドラを設定しています。

しかし１つ理屈がわからないところがあります。

それが「画像を添付し、その画像を表示領域から削除したあとに、画像を添付すると、loadイベントが2回走ってしまうのです。」
画像を表示領域から削除する度に、次画像を添付するときに走るloadイベントの数は増えていきます。

この現象は一体なんなのでしょうか？

画像を表示領域に添付する行為自体は1回なので、1回しか走らないと思っていたのですが、想定通りいかなくて疑問に思っています。

操作自体は問題ないのですが、なんだか気持ち悪いです。

もしわかる方やこうじゃないか？といった仮説を教えてくださる方がいらっしゃればお願い致します。

Comments

[eripong]

ソースは提示できませんか？ここにある情報からだと、loadイベントが複数回発生しているのではなく、loadイベントハンドラが複数登録されているのでは？という疑問が湧きます。

[k499778]

拝見していただきありがとうございます。
現在手元にコードがないのとスマホなので、充分な投稿ができない状態です。

ただご指摘通り、複数回登録しているのかもしれません。

$(表示領域).on('load',function(){
表示領域のモーダルの大きさ調整処理
})

をメソッドが呼ばれる度に行っています。

少しそこを見てみます。
ありがとうございます。

Answer 1

$(表示領域).on('load',function(){ 表示領域のモーダルの大きさ調整処理 }) をメソッドが呼ばれる度に行っています。

ということなら、

on()は追加式なのでイベントの重複登録に注意しよう

これっぽいですね。

• addEventListenerを使う
• on()と同時にoff()を使う

の対処が紹介されています。

Comments

[masaya_ohashi]

jQueryならone()という、1回だけ実行されるonと同じものがありますよ。

[eripong]

ああ、そうなんですね。フォローありがとうございます。

[k499778]

回答ありがとうございました。

解決することができました！
ありがとうございます。