removeEventListener

Question

下記状況下で二つ目のdivに設定したaddEventListenerをremoveしたいです

流れとして画像にonerrorを設定し、発生させます
発生したら、画像の親であるdivに設定されたfoo()をremoveEventListenerしたいのですが、
うまくいきません
何か書き方が違うんでしょうか

追記
書き方変えました
onerrorを発生させるために
存在しないURLを記述しました

下記が正しく処理されるのであれば
this.parentElement.removeEventListener('click', foo)で2つ目のdivに設定されているaddEventListenerが削除されるはずだと思うのですが削除されません

エラー内容
Uncaught ReferenceError: foo is not defined

<div class="a">1</div>
<div class="a"><img class="i" onerror="alert('error');this.parentElement.removeEventListener('click', foo);" src="https://www.nawpic.com/media/2020/brown-hert-nawpic.jpg"></div>
<div class="a">3</div>

<script>
window.onload=function(){
Array.from(document.querySelectorAll('.a'), l => {
l.addEventListener('click', function foo() {
alert("");
});
});
}
</script>

Comments

[int32_t]

ブラウザの開発者ツールのコンソールにエラーが出ますよね。それを質問文に含めてください。

[noritamat]

訂正
Uncaught ReferenceError: foo is not defined

fooでイベントが登録されてない・・・

[itagagaki]

> 流れとして画像にonerrorを設定し、発生させます
その手順を詳しく書いてください。

Answer 1

問題は2つあります。

■スコープの問題

関数式の foo という名前は、その関数内でのみ有効です。関数式 foo の外側からは参照できません。

foo() の定義をトップレベル(window.onload と同じレベル)に移動すれば大丈夫です。

■タイミングの問題

window.onload に登録した関数が呼ばれるのは、ドキュメント内のすべてのリソースのロードが終わった後です。<img> の error イベントよりも後になります。

window.onload を使わず、トップレベルに Array.from(... のコードを置けばよいかと思います。