Question

I’m working from a JavaScript book and would like to create some menus using callback functions and some intelligent use of event handling. I have some code that looks like this:

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);

I have run through the code. What essentially happens here is a triggered event when the mouse enters a UL element or it’s children as well as a triggered event for leaving that UL or it’s children. I’m having trouble understanding all but the last piece shown here:

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);

My understanding of these lines is that we are adding an event to the UL element with two functions, one returned from inside the first, that will fire on the capture phase of the event. My questions are why I need (ul_menu) at the end of these functions and with there being e1 and e does this mean that there are in fact two different events being triggered here? If someone could just explain those two last lines to me I would greatly appreciate it.

Answer 1

It’s a self-executing function that returns a function, and it’s a way of passing an extra parameter into the event handler. If you take the outer layer —

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

— then you’ll see you immediately get back what’s inside the { … } container, which is this:

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

This is then what becomes the event-handler. So, e is the event, but now the extra paremeter (‘target’ in this case) ul_menu gets passed to your ‘hoverMenu’ handler.