我正在阅读一本 JavaScript 书籍,并希望使用回调函数和事件处理的一些智能用法来创建一些菜单。我有一些看起来像这样的代码:
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 是事件,但现在额外的参数(在本例中为“目标”)ul_menu 被传递给您的“hoverMenu”处理程序。
关于javascript - 不理解 JavaScript 代码中的回调函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9961529/