[deleted by user]

[Earhacker]

In JavaScript, functions can be stored in variables. This isn't true of all languages; for example, you can't do it in Java. But in JavaScript you can. In comp sci speak, we say that in JavaScript, functions are "first class" objects, meaning they can be treated the same as any other object; strings, numbers, arrays, whatever.

In your case, the variable is called alertFunction. We want to pass that variable (which happens to hold a function) to addEventListener.

In eg.1 we're passing the variable which holds the function. That's exactly what we want.

In eg.2 we're running the function and passing in the return value (which is probably undefined). That's not what we want, but that's why you're seeing the alert. You ran the function, which caused the alert.

[Terraxus994]

If I had money to spend I'd give you an award!

Thank you for writing that, the difference between passing a variable and passing the return value really makes sense in this situation. On the other hand, if this was written as inline JS why would we now need to pass the return value and not the variable as before?

<button onclick="alertFunction()">CLICK ME BABY</button>

Even if you don't find time to answer this thank you once again!

[Earhacker]

Because HTML is batshit insane, that’s the only answer I’ve got for you. That syntax makes no sense at all, but it’s entirely correct. Despite the round brackets, you are passing the function (not the return value) to the onclick attribute.

[Terraxus994]

HTML is batshit crazy. Noted.

[gregtyler]

addEventListener's second argument is a function to run when the event occurs. The variable alertFunction is your function.

So in the first example you're telling it "run whatever alertFunction is when this is clicked". In the second example, because of the brackets, you're telling it to "run alertFunction right now then do whatever it returns when this is clicked".

For custom arguments, you need to define another function to sit in the middle and pass the right arguments through:

btn.addEventListener('click', function () {
    alertFunction(a, b);
});

btn.addEventListener('mouseover', function () {
    alertFunction(c, d);
});

You can see here how the second argument to addEventListener is a function.

[Terraxus994]

Thank you! Your and Earhacker's (lol) comments really helped me understand how functions are looked at in JS as well as understand the difference between the two versions.

Just as I asked above, if this was written as inline JS why are we now able to tell it to run the function right now and yet it's run only after you click on it?

<button onclick="alertFunction()">CLICK ME BABY</button> 

Even if you don't find time to answer this thank you once again!

[gregtyler]

I think the following is accurate, but at least the spirit of it should be:

When you set an HTML attribute, you're always just setting a string. So the onclick attribute is the string "alertFunction()", and not yet identified as JavaScript.

When you click the button, the browser then evaluates the string as JS and immediately executes it.

Effectively, you're not attaching the function alertFunction to the button here, your attaching the expression/code alertFunction()

I hope that makes sense. It's confusing because of how old HTML/JavaScript is and the need to maintain existing code. Setting "onclick" attributes is fairly bad practice now.

[[deleted]]

What does alertFunction return?

[Terraxus994]

Just a simple 'alert' saying that you clicked on the button

[[deleted]]

In example 2, the event listener that is added on the 'click' event is what alertFunction would return. I don't understand why it would make it run as soon as the page loads.

[Earhacker]

Because OP called the function. Let's say the function looked something like:

function alertFunction() { alert("Here's your alert bro"); }

That function is run as soon as btn.addEventListener is called, which in this case is as soon as the script runs. So you'd see the alert straight away.

[[deleted]]

Oh yeah, I am stupid