addeventListener 要素数に応じてイベントが重複する

Question

addEventlistenerについて質問があります。

問題点：

addEventListenerのイベント処理が重複される。

経緯：(下記ソースコード参照)

・要素を２つ以上作成する(ダブルクリックで作成)
・どの要素でもいいので要素の上で右クリックメニュー表示
・メニューの中の(要素を選択)をクリック
・全要素の左側にチェックボックスが表示される。
・要素の中からチェックボックスを２つONにする
・文字の大きさメニューからUPをクリック
・ボックスの数値が+2ずつ増える

状況：

・要素が一つのみの場合はイベントは正しく実行される。
・似たようなaddEventListenerイベントは複数作っていない。
・チェックボックスのONの数に応じてイベント処理が重複される。

イベント処理が重複される部分

sizeNum.value++
インクリメントは+１ずつ加算されるが、要素が一つ増えると+2,+3,+4,,,,となる。

解決したいこと：

複数の要素にイベント発生が同時に可能な状態で、かつイベント処理が重複しないようにしたい。

for (const test of qa) {
    test.onclick = ()=>{
      let t = event.target;
      if(t.checked == true) {
         let sizeUp = document.getElementById('sizeup');
         let sizeNum = document.getElementById('sizenum');
         sizeUp.addEventListener('click', () => {
         sizeNum.value++;
         t.nextElementSibling.style.fontSize = sizeNum.value + 'px';
         });
      } 
    
    }
  }

ソースコード：
https://codepen.io/mio-rei/pen/JjEYvmL

宜しくお願い致します。

Answer 1

チェックボックスをクリックするたびにイベントを追加するという仕様が不可解ですが、
とりあえず、
.addEventListener('click', () => { }) の代わりに .onclick = () => { }を使えば、上書きされるので重複することはないです。

Codepen のコードを見ると .onclick を使っている部分もありますね。

addEventListener は設定してあるイベントを上書きせずに追加する、
onclick は設定してあるイベントを上書きする、
という違いがあるということを理解して使い分けましょう。

Answer 2

addEventListenerは同じ要素に複数付けることが可能なので、onclickされるたびに関数が追加されます。
イベントの中でイベントを追加するのは面倒が起こりやすいので避けたほうが良いです。（前に登録した関数を削除することは可能ですが、煩雑になるのでお勧めしません）