How does anonymous function know what parameters are being passed in? For example,
Case 1:
$( "li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
Case 2:
$( "li" ).each(function(e) {
e.preventDefault();
});
Case 3:
$( "li" ).each(function( index, element ) {
console.log( index + ": " + element + $( this ).text() );
});
In each of these cases, how does the anonymous function know what e, index, element are?
Because the code in each will call the function you pass it with the arguments.
function notEach(callback) {
callback(1,2,3);
}
notEach(function (one, two, three) {
console.log(one, two three);
});
.each with one of the event handling methods, such as .click. See api.jquery.com/each and api.jquery.com/click
each. The arguments a callback function gets called with depend entirely on the thing that is calling it. When you pass a function to on it gets called with an event object (which has a preventDefault method) because you passed it to on, not because it was an anonymous function.If we can speak of each as if it's a little robot, each tells the function what its arguments are. It picks up the collection and the function, puts the elements of the collection into the function one at a time, and sticks the outputs together as a collection. http://api.jquery.com/jquery.each/
You should understand that when you write an anonymous function, it's both a procedure and an object. You are simultaneously defining for Javascript how to carry out that function ("knowing how" to call it) and what that function is ("knowing that" it is a particular object). Some languages are still in use where a function is not an object. So maybe that fact was confusing when you encountered it here.
naive implementation of each function:
function $(selector) {
var elements = document.querySelectorAll(selector);
return {
each: function (fn) {
for (var i = 0; i < elements.length; i++) {
fn(i, elements[i]);
}
}
};
}
The jQuery function returns an object with an each function. This function has access to the matched elements and iterates over them. It can call the function you gave it on every iteration and pass the current index and corresponding element to it.
Your second case doesn't make much sense to me. As far as I know jQuery, no event is passed to the each function.
.eachpasses those values to the function. Also note that your second example doesn't work, because.eachdoesn't pass an event object to the callback. And you can name the parameters however you want to..eachpasses the values you specify to the anonymous function.