javascript - 如何将事件分配给可能会根据屏幕尺寸发生变化的元素

Question

背景:我正在使用 JQuery 片段根据元素的 ID 将事件分配给元素。该事件从屏幕左侧滑动菜单。

问题:当屏幕尺寸变为 < 710px 时，我将隐藏原始元素并显示一个新元素(只是一个不同的图标)。但我希望新元素触发相同的事件。

我应该将事件一个接一个地分配给两个元素，还是可以将其合并为一个事件？

下面是我的 HTML JS 和 CSS 的例子 请注意，除非测试窗口高于 711 像素，否则触发器将无法工作

 window.onload = function(){

   document.getElementById('megga-nav-toggle').addEventListener('click', function () {
       var documentBody = $('#megga-global-menu');
       documentBody.toggleClass('is-active');
       if (documentBody.hasClass('hide-megga')) {
           documentBody.removeClass('hide-megga');
          
           return;
       }
       documentBody.addClass('hide-megga');
       
   });

   document.getElementById("megga-global-menu").addEventListener("mouseleave", menuHide);


  };
   function menuHide() {
       document.getElementById("megga-global-menu").classList.add('hide-megga');
   }

   #megga-global-menu {
       background: red ;
       position: fixed;
       top: 50px;
       bottom: 0;
       left:0px;
       width: 200px;
       z-index: 1000000;
       transition: ease all .6s;
   }
   #megga-global-menu.hide-megga {
       left: -200px;
       transition: ease all .6s;
   }
    #megga-nav-toggle {
       display: inline-block;
       z-index:999998;
       font-size: 30px;
       color: #000;
       cursor: pointer;
   }

@media screen and (min-width: 710px) {
    #megga-navmobile-toggle {
        display:none;
    }
}

@media screen and (max-width: 710px) {
    #megga-nav-toggle {
        display:none;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="megga-nav-toggle">FULL SCREEN</span><Bn/><Br/>

<span id="megga-navmobile-toggle">MOBILE SCREEN</span>




<div id="megga-global-menu" class="">
My slide out menu goes here!
</div>

Answer 1

我不确定我理解你的问题，但如果你只想根据屏幕尺寸显示不同的图标，为什么不将它们放在同一个元素中并使用 @media 显示想要的图标？

@media screen and (min-width: 710px) {
  #megga-navmobile-toggle-icon { display: none; }
}
@media screen and (max-width: 710px) {
  #megga-nav-toggle-icon { display: none; }
}

你的 html 应该是:

<div id="megga-nav-toggle">
  <span id="megga-nav-toggle-icon">FULL SCREEN</span><Bn/><Br/>
  <span id="megga-navmobile-toggle-icon">MOBILE SCREEN</span>
</div>