addEventListener("click", funkcja()) wywołuje się bez kliknięcia, ponieważ dodałem nazwę funkcji?

Question

Witam, dlaczego używając addEventListener("click", funkcja()) z nazwą funkcji zamiast function(){}, ta wywołuje się bez żadnego eventu? Kiedyś też miałem ten problem, że z nazwą funkcji nie chciało działać, lecz nie dostałem odpowiedzi. Mój kod:

if(if_made_achievement[i+plus_made_achievement] == 1 && if_received_achievement_reward[i+plus_made_achievement] != 1) //zrobiono achievement i nie odebrano nagrody
		{
			text.innerHTML = `Done - collect ${reward_description_arr[i+plus_made_achievement]}`;
			progress_bar.style.width = '100%';
			text.style.cursor = "pointer";
			description_div.innerHTML = `${achievement_description_arr[i+plus_made_achievement]} ==> Done`;
			switch(i+plus_made_achievement)
			{
				case 1:
					text.addEventListener("click", give_achievement_reward(1, i+plus_made_achievement)); //wywołanie funkcji dającej nagrody
					break;
			}
		}
		else if(if_made_achievement[i+plus_made_achievement] == 1 && if_received_achievement_reward[i+plus_made_achievement] == 1) //zrobiono achievement i odebrano nagrodę
		{
			text.innerHTML = `Done - collected ${reward_description_arr[i+plus_made_achievement]}`;
			progress_bar.style.width = '100%';
			description_div.innerHTML = `${achievement_description_arr[i+plus_made_achievement]} ==> Done`;
		}

function give_achievement_reward(achievement, achievement_i_array)//funkcja dająca nagrody
{
	switch(achievement)
	{
		case 1:
			coins += 1;
			break;
	}
	if_received_achievement_reward[achievement_i_array] = 1;
	coins_update();
}

Po zrobieniu achievementa na około milisekundę wyświetla się warunek kiedy zrobiono i nie odebrano nagrody, a następnie sama wywołuje się funkcja na dawanie nagród i już jest po odebraniu wszystko wyświetlane. Dlaczego tak się dzieje?

(kod tutaj wklejony jest skrócony dla czytelności, całość wklejam w komentarzu do pytania w linku, ale raczej to się nie przyda, po prostu jeżeli ktoś chce przetestować o co chodzi, czwarty żółty kafelek na dole, aby dostać monetę trzeba kliknąć duży szary kwadrat po lewej stronie)

Comments

Całość kodu:

https://codepen.io/DogeDoge/pen/RwVMrQm

---

dlaczego używając addEventListener("click", funkcja()) z nazwą funkcji zamiast function(){}, ta wywołuje się bez żadnego eventu? Kiedyś też miałem ten problem, że z nazwą funkcji nie chciało działać, lecz nie dostałem odpowiedzi

@Doge, jesteś pewien, że nie dostałeś odpowiedzi? https://forum.pasja-informatyki.pl/546410/window-addeventlistener-function-jednorazowy-funkcji-dziala-czyszczenie-napisu?show=546415#a546415

---

Przepraszam, szukałem właśnie odpowiedzi z tamtego pytania, ale jakoś przeoczyłem ten fragment.

Answer 1

Bo Ty nie podajesz nazwy funkcji, tylko wywołujesz ją.

function funkcja() {}

funkcja; // to jest nazwa funkcji
funkcja(); // to jest wywołanie funkcji

Jak po nazwie funkcji dodajesz (), to ostatecznie do addEventListener trafi to, co funkcja zwróciła, nie funkcja jako taka.

Comments

A czy da się wywołać addEventListerem funkcję z argumentami?

---

Da się, np. przez bind. Po prostu tworzysz kopię funkcji z odpowiednimi argumentami. Inna rzecz, że w takim wypadku IMO wygodniej jest po prostu przekazać funkcję anonimową i w niej po prostu wywołać funkcję, którą chcemy.