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

Binding multiple events (resize and load) to addEventListener (JQuery)

本文关键字：加载 JQuery addEventListener 事件 调整 绑定      更新时间：2023-09-26

我搜索了一下，但找不到合适的答案。网上有一些解决方案，这将是有帮助的，只是事情是，我需要改变我的整个代码结构，这不是我想要的精确。

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

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

和用法:

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

将代码放入函数中，并使用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";
                }
              }
            })
        });
    }
}
相关文章：