Javascript Question posted in
A very good W3school tutorial can be found here.

How does Javascript know that it is an event even with different name?

I think everybody who once coded in Javascript knows the events. As an example I have:

document.addEventListener("keydown", function(event) {
  console.log(event);
});

But my head still doesn’t get it: How does the function knows that it has to give back, because I didn’t defint it anywhere. Is it just, that the "addEventListener" says that there hast du be an event in the function, no matter the name or is it about the "keypress"?

Tags:

5

Answers


  1. 0

    A JavaScript function is an object of type Function. When you create an anonymous function like that, you are in fact creating a new Function object, with parameters and a body. Then, you provide this object as a parameter to the document.addEventListener function, which in turn provides a value to the first parameter of your function, regardless of the parameter name, and executes it. Your function doesn’t know anything about document.addEventListener (although you can get its name in your function), it just runs with the value it was provided.

    Login or Signup to reply.
  2. 0

    The addEventListener() is a function that takes two parameters: a string indicating the type of event to listen to, and a listener, which is an object that will receive the event.

    The name of the listener does not matter and can be a variable to store the event, but it is most common to use a function.

    In your example, "event" is the parameter of the function identified as the listener, the parameter of the function (if you provide one) will contain the event and can be named as you please (such as "pastry" in your example).

    You can learn more about the addEventListener() on the mozilla documentation

    Login or Signup to reply.
  3. 0

    Is it just, that the "addEventListener" says that there hast du be an event in the function, no matter the name?

    "addEventListener" provides the event to the function, by means of a regular function call.

    Function parameters in JavaScript are usually positional, not name-based. So it doesn’t matter what name the called function uses; addEventListener only cares that it needs to pass the event as parameter #1, and the function will receive it as parameter #1. The "inside" and "outside" variable names might happen to match, or they might not.

    For example, when you have function greet(name) and function greet(pancake), an outside caller cannot distinguish between the two: it just does greet("Fred") – it does not specify the name by greet(name="Fred") or anything like that.

    (Some other programming languages do have named parameters – e.g. Python does.)

    Since your event callback is still a regular function (and is called like a regular function), the same applies to its parameters.

    function exampleCaller(name, callback) {
    let text = "Hello, " + name + "!";
    let result = callback(text); // ⇐
}

exampleCaller("Fred", function(message) {
    console.log(`Was called with message "${message}"`);
});

exampleCaller("Fred", function(greeting) {
    console.log(`Was called with parameter: ${greeting}`);
});
    Login or Signup to reply.
  4. 0

    The second parameter of addEventListener is a function of a specific kind: a function that accepts a parameter of type Event (really of type Object with some fields)

    Maybe this is more clear:

    document.addEventListener("keydown", theEventHandlingFunction);


function theEventHandlingFunction(aParameterOfTypeEvent) {
    console.log(aParameterOfTypeEvent.code);
}

    A function is a closed piece of script that executes and returns some value, it can receive values to process, called parameters. Parameters can have any name, the name is just a placeholder, a way to identify the value.

    In JavasScript you can pass a whole function as parameter and it can be called later. In your example you passed to addEventListener an anonymous function, a function with no name, defined just for the porpouse: "call my function when an event occurs".

    In my example I gave that same function a name and a clear definition.

    It needs one parameter and, whatever the name of that parameter, it is expected to be an object (group of key value things) with some special fields like "code", "target", etc that you can use.

    Login or Signup to reply.
  5. 0

    The function you provide to addEventListener is a callback with a specific signature. From that link:

    the callback accepts a single parameter: an object based on Event describing the event that has occurred

    So, the parameter name is not relevant (it can be anything from e to haveYourCakeAndEatIt). The type of the parameter is relevant: it is always an Event.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search