Почему ajax работает не так, как ожидалось?

Question

[eternal_blue]

Знакомлюсь с аяксом вот тут, конкретно с функцией fetch(). Представленный в уроке способ преобразования полученных данных в текст меня разочаровал(возможно этот способ не единственный, но других я пока не знаю):

let promise = fetch(ajax.html);
    promise.then(
		response => {
			return response.text();
		}
	).then(
		text => {
			document.getElementById(result).innerHTML = text;
		}
	);

Чтобы каждый раз не прописывать эту тягомотину, я подключил в head файл easy_fetch.js с таким скриптом:

function ajaxto(adress, elem) { //функция, которая берет аякс по адресу в adress и ложит в элемент с id elem
   let promise = fetch(adress);
    promise.then(
		response => {
			return response.text();
		}
	).then(
		text => {
			document.getElementById(elem).innerHTML = text;
		}
	);
}

Собственно, вопрос. Такая конструкция:

button.addEventListener('click', ajaxto('ajax.html' , 'result') );

при загрузке сразу же исполняла код, и в окне result появлялось содержимое без клика. Поменял, установил атрибут onclick элемента result на выполнение той функции, и все как надо заработало, при клике. Это какие-то подводные у addEventListener?

Comments

[Пашенька]

У вас же чёрным по белому написан вызов функции, а именно ajaxto(). Скобки видите? Всё работает, как и ожидается.
В лисэнер должна передаваться функция, а не ее вызов.

[eternal_blue]

Пашенька, но ведь addEventListener должен привязывать функции к элементу, а не сразу его выполнять

[Robur]

eternal_blue, только вы ей функцию не передаете. У вас код по сути можно так представить:

const x = ajaxto('ajax.html' , 'result');
button.addEventListener('click', x );

[Пашенька]

eternal_blue, конечно, передаёте в лисэнер анонимную функцию, которая будет оборачивать уже интересующий вас вызов.

[eternal_blue]

Пашенька, спасибо, обернул и все заработало

Answer 1

[Loli E1ON]

Ну так у вас функция стразу вызывается, что бы она вызвалась только при событии, её нужно писать без скобок либо выполнять её в анонимной функции

button.addEventListener('click', () => ajaxto('ajax.html' , 'result') );