イベントリスナーによる、違うイベント同士の処理は上書き(追加)されないのか

Question

流れ:

changeイベントの場合
1.ダブルクリック　→要素作成
2.作製した要素に文字を入力
3.要素に文字を入力すると要素の背景が透明になる、文字が空になると要素の背景は白色に戻る

clickイベントの場合
1.ダブルクリック　→要素作成
2.要素を複数作成する
3.作成した要素を選択すると選択した要素の色が変わり他は通常の白色になる

背景：

changeイベントの処理を行った後に文字を空にして、clickイベントを行おうとしたら処理がされなかった(要素の色が変わらない)
違う種類のイベントリスナー同士だと処理が上書き(追加)されないのか？

だが、反対にclickイベントで要素の色が変わった後でも、changeイベントの処理はできた。

click　→　change 処理はできる

change →　click　処理はされない

やりたいこと：

changeイベントの処理を行った後でも、clickイベントが動作するようにしたい。

change　↔　click 相互にできる

教えて頂きたくお願い致します。

全体コード：

https://codepen.io/mio-rei/pen/abpGdqQ

changeイベント：

 const combine = obj.elm;
        combine.addEventListener('change', () => {
            if(combine.value !== "") {
                combine.style.backgroundColor =  'transparent';
                combine.style.border = 'none';
                combine.style.resize = 'none';
            } else {
                combine.style.backgroundColor = 'white';
                combine.style.border = 'solid';
                combine.style.borderWidth = 'thin';
                
            }
            });
        element.appendChild(obj.elm);
        obj.setPos(e);
        obj.elm = null; 

clickイベント：

 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');
   });
}    

Answer 1

イベントの問題というよりは、スタイルの優先順位の問題です。

combine.style.なんとか で設定したCSSプロパティは、スタイルシートで指定しているCSSプロパティより常に優先順位が高くなります。よって、いったん change イベントが発生するとそのイベントリスナで更新したCSSプロパティに関しては active クラスの付け外しによる値変更はできなくなります。

change イベントハンドラのほうもクラスの付け外しにして、

combine.addEventListener('change', () => {
  combine.classList.toggle('non-empty', combine.value !== "");
});

active クラスと non-empty クラスの組み合わせでどういうスタイルになるかはスタイルシートで定義しましょう。

---

参考までに、<textarea> に required 属性を付けると、入力がないときは :invalid 擬似クラスにマッチするようになります。

Comments

[rei78087487]

回答ありがとございます。
スタイルの優先順位は初めて知りました。
また、textareaのrequired属性による疑似クラスも貴重な知識をありがとうございます。
とてもわかりやすかったでした。
改めてありがとうございます。