не понимая функцию обратного вызова в коде JavaScript

Question

Я работаю из книги java-скриптов и хотел бы создать несколько меню с использованием функций обратного вызова и некоторого интеллектуального использования обработки событий.У меня есть код, который выглядит следующим образом:

window.onload = InitPage;

function InitPage(){

function hoverMenu(e, oTarget){
    var isChildOf = function(pNode, cNode){
        //alert("value of pNode:" + pNode + " value of cNode" + cNode);
        if(pNode === cNode){
            return true;
        }

        while (cNode && cNode !== pNode){
            cNode = cNode.parentNode;
        }

        return cNode === pNode;
    }

    //alert(e.srcElement);
    var target = e.target;

    if(!oTarget){
        oTarget = target;
    }

    var relTarg = e.fromElement;

    if(isChildOf(oTarget, relTarg) == false){
        alert("mouse enters");
    }
}

function unhoverMenu(e, oTarget){
    var isChildOf = function(pNode, cNode){
        //alert("value of pNode:" + pNode + " value of cNode" + cNode);
        if(pNode === cNode){
            return true;
        }

        while (cNode && cNode !== pNode){
            cNode = cNode.parentNode;
        }

        return cNode === pNode;
    }

    //alert(e.srcElement);
    var target = e.target;

    if(!oTarget){
        oTarget = target;
    }

    var relTarg = e.toElement;

    if(isChildOf(oTarget, relTarg) == false){
        alert("mouse leaves");
    }
}

var ul_menu = document.getElementById("ul_grabbed");
ul_menu.addEventListener("mouseover", function(e1){return function(e){hoverMenu(e, e1)}}(ul_menu),true);
ul_menu.addEventListener("mouseout", function(e1){return function(e){unhoverMenu(e, e1)}}(ul_menu),true);

Я пробежался по коду.По сути, здесь происходит триггерное событие, когда мышь входит в элемент UL или его дочерние элементы, а также триггерное событие для выхода из этого UL или его дочерних элементов.У меня возникают проблемы с пониманием всего, кроме последней части, показанной здесь:

ul_menu.addEventListener("mouseover", function(e1){return function(e){hoverMenu(e, e1)}}(ul_menu),true);
ul_menu.addEventListener("mouseout", function(e1){return function(e){unhoverMenu(e, e1)}}(ul_menu),true);

Мое понимание этих строк состоит в том, что мы добавляем событие в элемент UL с двумя функциями, одна из которых возвращается изнутри первой,это будет срабатывать на этапе захвата события.Мои вопросы: зачем мне нужно (ul_menu) в конце этих функций, а при наличии e1 и e это означает, что на самом деле здесь происходят два разных события?Если бы кто-то мог мне объяснить эти две последние строки, я был бы очень признателен.

Answer 1

Это автоматически выполняемая функция, которая возвращает функцию, и это способ передачи дополнительного параметра в обработчик событий. Если вы берете внешний слой -

function(e1){ ... }(ul_menu)

- тогда вы сразу увидите, что находится внутри контейнера {...}, а именно:

function(e) { hoverMenu(e, ul_menu); }

Это то, что становится обработчиком событий. Итак, e - это событие, но теперь дополнительный параметр (в данном случае «target») ul_menu передается вашему обработчику hoverMenu.