AddEventListenerの動作について

Question

背景：

下記ソースコードはテキストエリアを作成した後、要素どれか一つをクリックすると色が変わるというものです。
例えば要素が複数あった場合、どれか一つをクリックすると以前にクリックした要素の色は元の色に戻ります。
jqueryでのソースコードになりますが、参考のURLがこちらです。
https://liveweave.com/

これを参考にJavascriptで作成をしてみました。
成功はしたのですが、addEventListenerの要素を変えただけでなぜ挙動が変わるのか教えて頂きたく質問しました。

全体コード：
[https://codepen.io/mio-rei/pen/GRrdKzQ]

例１：

こちらは上記の内容をJavascriptにて記述したものです。
要素をダブルクリックで複数作成後、そのうちの要素一つをクリックすると要素の色が変わります。
その状態でまた別の要素をを選択すると選択した要素は変わり、以前に選択した要素は元の色に戻ります。

const text = document.querySelectorAll('textarea');
    
    for (const tes of text) {
        document.addEventListener('click', () => {  
        let t = event.target;        
        if(t.nodeName != 'TEXTAREA') return;
        tes.classList.remove('active');
        t.classList.add('active');
   　　 });
　　}

例2：

こちらはaddEventListenerの要素をdocumentからtesに変更したものです。
挙動は例１：と違い、要素を作成後、要素をクリックすると色は変わりますが、
他の要素を選択してもそのままの色の状態です。

   const text = document.querySelectorAll('textarea');
    
    for (const tes of text) {
        tes.addEventListener('click', () => {  
        let t = event.target;        
        tes.classList.remove('active');
        t.classList.add('active');
        });
    }

上記ソースコードは何故同じ動きにならないのか？

addEventListenerの対象要素が、documentかtes(textera)によって変わる動作の違いについて

例１はaddEventListenerの要素をdocumentにしていますが、クリックする対象がそれだと本来の目的であるテキストエリアの色を変更、戻すといった事ができません。なので、if(t.nodeName != 'TEXTAREA') return;を記述して、対象の要素をテキストエリアにしています。

例２はaddEventListenerの要素をtesとして、こちらは対象要素の目的であるテキストエリアにしています。対象要素をクリックしているにも関わらずなぜこちらは思うような動作にならないのか？
こちらの方がシンプルにクリック対象の要素であり、記述も簡易的でわかりやすいと思うのに。

ご教示お願い致します。

Answer 1

例2が期待どおりに動かないのは、例2でイベントリスナでクリックされた要素以外を一切操作していないからです。例2で、tes と event.target は同じ要素です。tes.classList.remove('active') を document.querySelector('textarea.active')?.classList.remove('active') とでも変えれば動くでしょう。

例1が期待どおり動くのは、イベントリスナが text の個数ぶん登録されていて、それぞれが別の tes を参照していて、どこをクリックされてもすべてのイベントリスナが呼ばれるからです。

例1も例2もイベントリスナを test の個数ぶん登録していますが、定石はdocumentに1つだけ登録することです。

document.addEventListener('click', event => {  
  let t = event.target;
  if (t.nodeName != 'TEXTAREA')
    return;
  document.querySelector('textarea.active')?.classList.remove('active');
  t.classList.add('active');
});

Comments

[hatena19]

document.querySelector('textarea.active').classList.remove('active');
は繰り返し処理にしないとエラーになりませんか。

[int32_t]

querySelectorAll()ではないので繰り返しは不要ですが、nullチェックは必要ですね。指摘ありがとうございます。修正します。

[hatena19]

あっ、querySelectorAllと見間違ってました。
textarea.active は一つしかないはずですので、querySelectorでOKですね。

Answer 2

例1はdocumentにtextareaの数だけAddEventしているので1回のクリックでtextarea回数実行されます。
そのため、tes.classList.remove('active');で全textareaからactiveが削除されるので元にもどります

例2はtextareaにAddEventしているので、textareaをクリックした時にだけ実行されますが
AddEventの中の処理は１回しか実行されません。

そのため、以下のように一旦すべてのtextAreaからactiveを削除する必要があります

const text = document.querySelectorAll('textarea');

for (const tes of text) {
  tes.addEventListener('click', () => {  
    const t = event.currentTarget;   // ここはtargetではなくcurrentTargetにすべき
    for(const x of text){
        x.classList.remove('active'); // 一旦全て削除
    }
    t.classList.add('active');
  });
}

Comments

[rei78087487]

分かりやすい回答ありありがとうございます。
また、それにちなんだコードを教えて頂きありがとうございます。

Answer 3

対象要素をクリックしているにも関わらずなぜこちらは思うような動作にならないのか？

こちらの方がシンプルにクリック対象の要素であり、記述も簡易的でわかりやすいと思うのに。

こちらのコードの場合、「元に戻す要素」を検出する必要があります。現状のコードでは、tesもtもクリックされた<textarea>なので、別な<textarea>の色をもとに戻す処理がありません。

Comments

[maisumakun]

前者の場合、1回のクリックで<textarea>の数だけイベントが起動しています。1回のイベントが1つの<textarea>の色を戻します。