addEventListenerに複数のイベント（サイズ変更と読み込み）をバインドする方法

Question

私のグーグルでグーグルではありましたが、私の質問に適切な答えが見つかりませんでした。私がコード構造全体を変更する必要があり、それが私が正確に望むものではないということだけが役立つオンラインのソリューションがいくつかあります。

window.addEventListener('DOMContentLoaded', function(event) { 
 
    if(window.matchMedia("(min-width: 767px)").matches){ 
 
     Array.prototype.slice.call(document.getElementsByClassName("tabcontent")).forEach(function(element, index) { 
 
     element.addEventListener("mouseleave", function(event) { 
 
\t  \t event.target.style.display = "none"; 
 
     }); 
 
     document.getElementById("categories-list-box").addEventListener("mouseleave", function(event) { 
 
     if (event.relatedTarget.className.indexOf("tabcontent") == -1) { 
 
\t tabcontent = document.getElementsByClassName("tabcontent"); 
 
\t for (i = 0; i < tabcontent.length; i++) { 
 
\t tabcontent[i].style.display = "none"; 
 
\t } 
 
     } 
 
     }) 
 
     }); 
 
    } 
 
})

Answer 1

function addListenerMulti(el, s, fn) { 
    s.split().forEach(e => el.addEventListener(e, fn, false)); 
} 

と使用方法：

addListenerMulti(window, 'mousemove touchmove', function(){…}); 

Answer 2

関数内のコードを入れて、addEventListenerを

で

window.addEventListener('DOMContentLoaded', myFunction); 
window.addEventListener('resize', myFunction); 


function myFunction(){ 
    if(window.matchMedia("(min-width: 767px)").matches){ 
     Array.prototype.slice.call(document.getElementsByClassName("tabcontent")).forEach(function(element, index) { 
      element.addEventListener("mouseleave", function(event) { 
       event.target.style.display = "none"; 
      }); 
      document.getElementById("categories-list-box").addEventListener("mouseleave", function(event) { 
       if (event.relatedTarget.className.indexOf("tabcontent") == -1) { 
        tabcontent = document.getElementsByClassName("tabcontent"); 
       for (i = 0; i < tabcontent.length; i++) { 
        tabcontent[i].style.display = "none"; 
       } 
       } 
      }) 
     }); 
    } 
}