title: How to addEventListener to button and everything that can be putted in button?
body: <p>Got a problem with JS events.</p>
  
  <pre><code>&lt;button class="TabsItem active"&gt;
    &lt;img src="images/type-icons/120.PNG" alt=""&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>And use <code>addEventListener</code> to <code>.TabItem</code> but when I clicked on <code>&lt;img /&gt;</code> happens nothing. Can't figure out how to fix it so that everything that can be appeared in button will react on events.</p>
  
  <p>Didn't find the answer by searching and googling.
  Thanks.</p>
  
  <p>UPD:
  Here is js part, that rely on arrays of objects:</p>
  
  <pre><code>let buffer = document.querySelectorAll('.Tabs'),
          Tabs = [];
  
  buffer.forEach(el =&gt; {
      Tabs.push({
          List: el,
          Switches: el.querySelectorAll('.TabsItem'),
          Contents: el.querySelectorAll('.TabsContentItem'),
      })
  });
  buffer = [];
  
  Tabs.forEach(currentTab =&gt; {
          currentTab.Switches.forEach(tabSwitch =&gt; {
              tabSwitch.addEventListener('click', (e) =&gt; {
                  e.stopPropagation();
                  const currentButton = e.target;
                  if ((currentButton == tabSwitch) &amp;&amp; (!currentButton.classList.contains('active'))) {
                      currentTab.Switches.forEach(currentTabSwitchClear =&gt; { currentTabSwitchClear.classList.remove('active'); });
                      currentTab.Contents.forEach(currentTabContentClear =&gt; { currentTabContentClear.classList.remove('active'); });
                      currentButton.classList.add('active');
                      currentTab.Contents[Array.from(currentTab.Switches).indexOf(currentButton)].classList.add('active');
                  }
              });
          });
      });
  </code></pre>