Javascript onclick = function — почему такая форма записи?

Question

[Алексей Дзюба]

Вопрос банальный. Почему, когда мы задаем что-нибудь вроде

var myButton = document.querySelector('.btn-primary');
myButton.onclick = function () {
 //do something
}

мы должны писать сначала function () {...}, а не сразу написать тело функции? Знаю, что это связано со внутренним устройством джаваскрипта? Почему работает только так? Просто если написать тело функции (например, вывести что-нибудь в консоль при клике), то консоль выведется сразу, а не при клике -- однако если обернуть console.log в функцию, то все нормально отрабоает. Почему так?

Comments

[Kovalsky]

"мы должны писать сначала function () {...}, а не сразу написать тело функции?" - вероятно такое возможно в зазеркалье, а вообще тело функции не может существовать без функции.

"Просто если написать тело функции (например, вывести что-нибудь в консоль при клике), то консоль выведется сразу," - это как? Лучше покажите.

Answer 1

[Александр Пашкевич]

мы должны писать сначала function () {...}, а не сразу написать тело функции?

Именно так. Таким образом на действие onclick пользователя вы говорите браузеру:"Выполни-ка вот эту функцию". Мне интересно как вы хотите сразу писать тело функции? Если как-то так:

a.onclick = {
//do somethiong
}

В таком случае вы скажете браузеру:"Вот когда хомосаппиенс нажмет на кнопку, тогда объект". Не совсем понятно, не так ли?
Если вы хотите тело передавать вот так:
a.onclick = //do something
То вы по сути начнете просто перечислять инструкции для браузера. А вы хотите, чтобы эти инструкции были именно для обработчика событий.

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

a.onclick = func;
function func(){
//do somethong
}

Тут по факту вы тоже говорите браузеру, что надо сделать при событии. Тут главное написать вот так:
a.onlick = func
А не так
a.onlick = func()//Очень плохо, не пишите так
Во втором варианте вы передаете на обработчик уже результат выполненной функции.

И еще лучше использовать addEventListener, Например:

a.addEventListener('click',handler)
function handler(){
//do something
}

Answer 2

[Владимир]

1) Нужно использовать addEventListener а не присваивать обработчик напрямую, потому что в єтом случае ты не можешь навесить более одного обработчика
2) Ты присваиваешь результат выполнения конструкции function () {...} им будет функция, а если ті будешь присваивать результат выполнения console.log, то ты присвоишь undefined

Comments

[Алексей Дзюба]

То есть, например, если без ф-ции передавать, то тело ф-ции отрабоает в глобальном контексте (windown), а если обернем в ф-цию, то в контексте нашего желаемого элемента?

[Владимир]

Алексей Дзюба, "Без тела передавать...тело отработает" это как ? Какое тело если нет тела ?
Если не читал, то сначала прочитай https://www.books.ru/books/javascript-podrobnoe-ru...

Answer 3

[VoidVolker]

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

Наверно потому что в JS это такая форма записи функции. Изучите такие понятия как "функция", "процедура", "компиляция", "выполнение", "интерпретация". Определение функции - это компиляция кода в некоторый бинарный вид (промежуточный код, байт-код, машинный код и т.п. - в зависимости от реализации в конкретном ЯП) и дальнейшее использование этого кода по адресу начала этого кода / указателю.