将多个事件（调整大小和加载）绑定到 addEventListener (JQuery)

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) { 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"; } } }) }); } })

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