title: Detect the target parent element when perform mouse "onwheel Event"
body: <p>What this code should do is:</p>
  <p>I have a list of element IDs, each of these target elements contains other elements. When I use the mouse wheel and the cursor is on one of the target elements (or some of its child element) some action must be performed.</p>
  <p>I wrote this code and it works fine. What worries me is that each time the code has to perform many calculations to complete the task. If anyone has an idea how I can optimize this task I will be happy to share. Тhanks in advance.</p>
  <p><em>Please, Run code snippet on Full page</em></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var flag = true;
  var myTarget;
  var myRes;
  var myI;
  
  // The IDs of the target elements
  var array = ['elOne', 'elTwo', 'elThree'];
  var newArray = array.reverse();
  
  for (var i = 0; i &lt; array.length; i++) {
      var myEl = document.getElementById(array[i]);
      myEl.parentElement.addEventListener("wheel", event =&gt; {
          mouseWeel(event.target);
      });
  }
  
  function mouseWeel(cmp) {
      if (cmp !== myTarget) {
          for (var i = 0; i &lt; newArray.length; i++) {
              var res = cmp.closest('#' + newArray[i]);
              if (res) { break; }
          }
  
          myTarget = cmp;
          myRes = res;
          myI = i;
      }
  
      cmd = myTarget; res = myRes; i = myI;
  
      if (flag) {
          var myEl = document.getElementById(newArray[i]);
          myEl.appendChild(document.createTextNode(i));
          flag = false;
      } else {
          flag = true;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="elOne" style="width:100%; height:90vh; background:orangered;"&gt;
      &lt;div id="elTwo" style="width:50%; height:45%; background:orange; margin: auto;"&gt;
          &lt;div style="width:80%; height:50%; background:orange; padding: 10px;"&gt;
              &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
              &lt;span&gt;Lorem ipsum dolor sit amet consectetur.&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="elThree" style="width:50%; height:45%; background:blue; margin: auto;"&gt;
          &lt;div style="width:80%; height:50%; background:blue; padding: 10px;"&gt;
              &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
              &lt;span&gt;Lorem ipsum dolor sit amet consectetur&lt;/span&gt;
              &lt;div
                  style="width: 150px; height: 150px; margin-left: -200px; background:blue; padding: 20px; transform: rotate(-45deg); opacity: 0.5; color: white;"&gt;
                  I am a child of the blue element
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>