resizeイベントを使用した際にjsが動かない

Question

resizeイベントを使用した際に、jsが動かず原因がわからない状況でございます。

resizeイベントを使用しない際は問題なく動作いたしました。

【問題なく動作いたしました↓】

window.addEventListener('DOMContentLoaded',function(){
  const target={tab1:"first",tab2:"second",tab3:"third",tab4:"four"};
  [].forEach.call(document.querySelectorAll('.tab'),function(x){
    x.addEventListener('click',function(e){
      const slideClass=document.querySelector('#slide').classList;
      [].forEach.call(slideClass,function(x){
        slideClass.remove(x);
      });
      slideClass.add("move-to-"+target[x.id]);
      document.querySelector('.tab.selected').classList.remove('selected');
      x.classList.add('selected');
    });
  });
});

【resizeイベント導入後 -- jsが動きません↓】
resizeイベントはこちらのサイトを参考させていただきました。

var timeoutId ;
window.addEventListener( "resize", function () {
	if ( timeoutId ) return ;
	timeoutId = setTimeout( function () {
		timeoutId = 0 ;
        // 処理内容↓↓↓
        window.addEventListener('DOMContentLoaded',function(){
        const target={tab1:"first",tab2:"second",tab3:"third",tab4:"four"};
        [].forEach.call(document.querySelectorAll('.tab'),function(x){
          x.addEventListener('click',function(e){
            const slideClass=document.querySelector('#slide').classList;
            [].forEach.call(slideClass,function(x){
              slideClass.remove(x);
            });
          slideClass.add("move-to-"+target[x.id]);
          document.querySelector('.tab.selected').classList.remove('selected');
          x.classList.add('selected');
        });
       });
      });
　　　　　// 処理内容↑↑↑
    }, 500 ) ;
} ) ;

大変恐縮ですが、プログラミングにつきまして
初心者のため何が違うのかなど詳しくご教示いただけると幸いです。

お手数おかけいたしますが、何卒よろしくお願いいたします。

Answer 1

addEventListenerはその名のとおりイベントに関数を紐付けるためのものなので、紐付け後にそのイベントが起こるまで何も処理を行いません。
DOMContentLoadedはresizeイベントより前に1度だけ起きるイベントなので、動かないのは当然です。また、resizeのように複数回起こるイベントの中で他のイベントを登録するのは避けたほうが良いです。

【EventTarget.addEventListener() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

Comments

[06140614]

@kei344様

ご返答ありがとうございます！

この場合、resizeイベント発火後のjsを書き換えないと
resizeイベントを使用すべきではないということでしょうか。。。

[kei344]

> resizeイベントを使用すべきではない
違います。
resizeイベント内でaddEventListenerを使うような設計は避けたほうが良い（＝使わないでできる方法を考えないと副作用が大きい）という回答です。

Answer 2

DOMContentLoadedは初期レンダリング時にdocumentが読み込み終わったら実行されるイベントです。

DOMContentLoaded内の処理はDOMContentLoaded外に出して定義すれば動くようになると思います。

Comments

[06140614]

@FrontEnd_Japan様

ご返答ありがとうございます！

>DOMContentLoaded内の処理はDOMContentLoaded外に出して定義すれば動くようになると思います。
→大変恐縮ですが、プログラミングにつきまして
　初心者のため外に定義がよくわからない状況になります。

恐れ入りますが、ご教示いただくことは可能でしょうか。
お手数おかけいたしますがよろしくお願いいたします。

[FrontEnd_Japan]

resizeイベント後に実行したい処理は何でしょうか？？

[FrontEnd_Japan]

resizeイベントの中でクリックイベントもありますので、これも宜しくないです。
resizeイベント後に実行したい処理が分かれば、それだけをresizeイベント内に記載しておけばOKだと思います。