できるだけソースコードの形態を書き換えずにaddEventListenerの上書きがしたい

Question

できるだけソースコードの形態を書き換えずにaddEventListenerの上書きがしたいです
下記でいったら
上書きされworldだけ表示されるようにしたいです
詳しい方回答お願いいたします

<script>
window.onload=function(){

div=document.createElement("div");
div.id="all_menu";
div.style.width="25%";
div.style.height="100%";
div.style.background="red";
div.addEventListener('click', function() {
alert("hello");
});
div.addEventListener('click', function() {//ここで前のhelloを上書きしてhelloをなかったことにしたい
alert("world");
});
document.body.appendChild(div);

}
</script>

Comments

[Zuishin]

onclick を使うとか。

[maisumakun]

> 下記でいったら

この例で言えば、「そもそもalert("hello");の方を割り当てない」という解決策が可能です。それが不可能なのであれば、その事情が分かる例をご提示いただければと思います。

[退会済みユーザー]

一度付けたがあとから消したいという事は不可能なんですか

[maisumakun]

> 一度付けたがあとから消したいという事は不可能なんですか

可能か不可能かを言えば可能です。ただ、上に書いたように「外さずに済む」解決策を取れるのであれば、そのほうがより「ソースコードの形態を書き換えずに」済むのではないかと考えます。

[退会済みユーザー]

外さずに済むんだったら最初から付けない、バカでもアフォでもわかる・・・

[Zuishin]

この質問を見ると、バカでもアフォでもわかることがわかっていない人が書いたように見えます。
そう見られたくなかったら、大人が仕事で書く資料のように書き直しましょう。

[maisumakun]

ここまでシンプルな例ではないにしても、「イベントハンドラはそのままで中の動作だけ切り替える」など、「イベントハンドラの付け外しに頼らない」解決策が、状況によってはありえます。

実際の背景がわからないと、それ以上はコメントできません。

Answer 1

できるだけソースコードの形態を書き換えず

だと、かなり困難だと考えたほうがよいです
コールバックの関数を名前で指定できるようにしているなら
removeAttributeするだけなんですが・・・

sample

ちょっといじっていいならこんな感じで

window.onload=function(){
div=document.createElement("div");
div.id="all_menu";
div.style.width="25%";
div.style.height="100%";
div.style.background="red";
div.addEventListener('click',hello=function(){
  alert("hello");
});
document.body.appendChild(div);
div.removeEventListener('click',hello);
  div.addEventListener('click', function() {
alert("world");
});
}

Comments

[退会済みユーザー]

無反応です
当方Firefoxです

[退会済みユーザー]

コンソールエラーログも出ていません

[yambejp]

winのfirefox/chrome/edgeで試していますが、コピペですべて
問題なく動作していますが・・・

[退会済みユーザー]

クリックするのを忘れてました
ベストアンサーです
yamabejp氏はJavaScriptの神様です

[退会済みユーザー]

他のポンコツ（Zuishin、maisumakun）と大違いです
ありがとうございました

[Zuishin]

同じ質問を何度も繰り返して回答を理解できないマイナススコアの人からの賛辞、お気の毒です。

[退会済みユーザー]

大便に反応するのは大便だけやで
お疲れ！

[Zuishin]

大便マンからの賛辞、お気の毒です。

[Zuishin]

https://teratail.com/users/arwqwq#reply

大便マンの別アカウント。

Answer 2

リスナを上書きする手段はないので、登録済みのリスナを消すしかありません。

1つ目のaddEventListener()呼び出しを、

const firstListener = function() {alert("hello");};
div.addEventListener('click', fistListener);

のようにリスナに名前を付けて、2つ目の登録時に div.removeEventListener('click', firstListener); で消します。

でもまあ、「関数に名前を付ける」という変更がアリなのであれば、1つ目の addEventListener() をソース上で消せばいいような気もします。

---

もう少し事情を書いてくれれば別解もあるかもしれません。たとえば質問文のコードであれば、alert() 関数を書き換えて「引数が "hello" だったら "world" と表示する」も「上書き」と同じ挙動になりますよね。

Comments

[退会済みユーザー]

どうもありがとうございます
参考にさせていただきます

[退会済みユーザー]

他、方法思い付く方も随時募集します
よろしくお願いいたします