执行鼠标“onwheel事件”时检测目标父元素

Question

这段代码应该做的是：我有一个元素 ID 列表，每个目标元素都包含其他元素。当我使用鼠标滚轮并且光标位于目标元素之一（或其某些子元素）上时，必须执行某些操作。我写了这段代码并且运行良好。让我担心的是，每次代码都必须执行许多计算才能完成任务。如果有人知道我如何优化这项任务，我将很乐意分享。提前致谢。请在整个页面上运行代码片段var flag = true;var myTarget;var myRes;var myI;// The IDs of the target elementsvar array = ['elOne', 'elTwo', 'elThree'];var newArray = array.reverse();for (var i = 0; i < array.length; i++) {    var myEl = document.getElementById(array[i]);    myEl.parentElement.addEventListener("wheel", event => {        mouseWeel(event.target);    });}function mouseWeel(cmp) {    if (cmp !== myTarget) {        for (var i = 0; i < 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;    }}<div id="elOne" style="width:100%; height:90vh; background:orangered;">    <div id="elTwo" style="width:50%; height:45%; background:orange; margin: auto;">        <div style="width:80%; height:50%; background:orange; padding: 10px;">            <h2>Lorem ipsum</h2>            <span>Lorem ipsum dolor sit amet consectetur.</span>        </div>    </div>    <div id="elThree" style="width:50%; height:45%; background:blue; margin: auto;">        <div style="width:80%; height:50%; background:blue; padding: 10px;">            <h2>Lorem ipsum</h2>            <span>Lorem ipsum dolor sit amet consectetur</span>            <div                style="width: 150px; height: 150px; margin-left: -200px; background:blue; padding: 20px; transform: rotate(-45deg); opacity: 0.5; color: white;">                I am a child of the blue element            </div>        </div>    </div></div>