Where does an anonymous function gets its arguments

Question 1

Event handlers may be attached to various objects including DOM elements, document, the window object, etc. When an event occurs, an event object is created and passed sequentially to the event listeners.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Event

An event listener or event handler can be an anonymous function or named function, it really doesn’t matter. The point is that it’s the event interface that defines the event object that is passed to the handler.

To find out exactly the event property from the event you are using, please refer to the windows docs: http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx

Question 2

It's rather simple: whatever function internally calls that callback passes the arguments. See, addEventListener tells the executing Javascript engine to call the callback function you specify whenever an event occurs. The javascript engine saves your anonymous function in some variable - and cann call it later on using that exact variable, passing any number of arguments.

To illustrate it, consider something like this the internal function that handels events (purlely fictional, just to illustrate how it could be done):

var callbacks = [];

function addEventListener(newEvent, newCallback) {
    callbacks.push({event : newEvent, callback : newCallback});
}

function handleEvent (someEvent) {
    for (var i = 0 ; i < callbacks.length ; i++ ) {
        if (callbacks[i].event == someEvent.name) {
            callbacks[i].callback(someEvent);
        }
    }
}

Some more explanation:

As javascript is a so-called "functional language", functions are just values of variables.

function someFunc () {}

is actually just some kind of shortcut (technically it's not, but it does the same thing) for

var someFunc = function () {}

This having said, it's of cours possible to associate multiple names with one function:

var someFunc  = function () {}
var sameFunc  = someFunc;
var stillSame = somefunc;
var alsoSame  = stillSame;

and you can call that function using any of those names, including passing arguments of course:

var someFunc  = function (arg) { alert(arg); }
var sameFunc  = someFunc;
sameFunc("It worx");

You can even call a function without ever naming it:

(function () {alert("test")})();<

or

(function (arg) { alert(arg); })("test")

Using this concept to perversion finally leads (long way to go however) to things like the y-combinator.

Question 3

The arguments recieved by the event listener are sent from the dispatchEvent, i.e. when the event dispatched it passes an event object to your handler.

Refer to this documentation on how to create and dispatch the event. The event object can vary in structure to convey information to the eventhandler to execute necessary steps. So in your case when you do lv.dispatchEvent(newevent) this sends an newevent as eventObj to your event handler.

Keep in mind there can be multiple eventhandlers listening to an event so the browser maintains a stack for the eventlisteners running them sequentially with each of them passed eventObj.

Anonymous function is no different from a named function. In JavaScript functions are first-class objects meaning regular objects. So you can pass them like regular objects(numbers,strings) without having to name them. Only thing is reuse becomes an issue.

Question 4

What you need to understand this code is to rewrite it a bit:

var lv = document.getElementById('lv'),
    invokeHandler = function (eventObj) {
        var promiseFullfilled = function (listViewItem) {
                var binding = files.dataSource.createListBinding(),
                    anotherPromiseFullfilled = function (dataItem) {
                        var key = dataItem.key;
                        files.dataSource.remove(key);
                        binding.release();
                    };

                binding.fromIndex(listViewItem.index).then(anotherPromiseFullfilled);
            };

        eventObj.detail.itemPromise.then(promiseFullfilled);
    };

    lv.addEventListener('iteminvoked', invokeHandler);

This code works just the same, however it is now obvious that addEventListener or then actually do not know anything about the callback functions they are passed with. They can, however, use Function.prototype.call or Function.prototype.apply to apply arguments:

// This is PSEUDOCODE, event model actually works in a totally different way

HTMLElement.prototype.addEventListener = function(eventType, callback, bubbles) {
    // callbacks is some internal collection for this specific element, probably available via a closure, looks something like:
    // { 
    //   'someEventType': [callback1, callback2], 
    //   'someOtherEvent': [callback1, callback3, callback4] 
    // }
    callbacks[eventType].push(callback); 
}

// This is called whenever an event is triggered on an element
HTMLElement.prototype.dispatchEvent = function(event) {
    callbacks[event.type].forEach( function(callback) {
        return callback.call(this, event); // the callback is called with 'this' set to the element DOM object, and 'event' is the first argument  
    });
    // then it can bubble or cancel depending on the event type and callback results
}

Question 5

it is a CustomEvent, and all the process is like that:

//you add a anonymous function to a specific listener
lv.addEventListener('iteminvoked', function (eventObj) {
    console.log(eventObj===myEvent);
});

//somewhere in your code a CustomEvent gets created based on "iteminvoked" key
var myEvent = new CustomEvent("iteminvoked", {
    itemInfo: {
        name: "yourItem"
    },
    bubbles: true,
    cancelable: false
});

//somewhere when an item gets invoked this code raise the `iteminvoked` trigger
lv.dispatchEvent(myEvent);

all the functions that are passed as a listener are stored based on the key, something like:

var observers = {
    "iteminvoked" : [f1, f2],
    //other keys
}

it doesn't have anything to do with not having name, the function object is stored in the some kind of array. and dispatchEvent goes thru the array and invokes all the functions, and pass the myEvent as their parameter. It is a Observer pattern, implemented in javascript, I have implemented it once in my own javascript library like:

var lv = /*your element*/;
if(observers["iteminvoked"]){
    for(var i=0;i<observables["iteminvoked"].length;i++){
        var func = observables["iteminvoked"][i];
        var o = func.call(lv, myEvent);

        //this line is to support return false
        if(o!==undefined && o===false) break;
    }
}

as you can see it is dispatchEvent resplonsiblity to invoke all the observers, and your function no matter it has name or not gets invoked with the lv as the this context and myEvent as the parameter.