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是事件，但现在额外的参数（在这种情况下为'目标'）ul_menu将传递给您的'hoverMenu'处理程序。

不理解javascript代码中的回调函数

1 个答案: