不了解JavaScript代码中的回调函数

我正在使用一本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的情况下,这实际上意味着在这里触发了两个不同的事件吗？如果有人能向我解释最后两行,我将不胜感激.

解决方法:

这是一个自执行函数,它返回一个函数,并且是将额外参数传递到事件处理程序中的一种方式.如果采用外层-

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

-然后您会立即看到{…}容器中的内容,它是：

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

这就是事件处理程序.因此,e是事件,但是现在额外的参数(在这种情况下为“ target”)ul_menu传递给您的“ hoverMenu”处理程序.

标签：javascript-events,javascript
来源： https://codeday.me/bug/20191201/2081538.html