Разница между оповещением ( "Привет!" ) и функцией() {alert ( "Привет!" )}

Когда мы делаем встроенную команду в кнопке:

<button id="myButton" onclick="alert('Hi!')">

Почему

document.getElementById("myButton").onclick = alert('Hi!')

не работает, но выдается предупреждение, когда страница загружается? Я не могу понять, как это работает с function(), добавленным к нему и без function(). Надеюсь, вы, ребята, поняли мой вопрос. Мне что-то не хватает.

Ответы

Ответ 1

document.getElementById("myButton").onclick = alert('Hi!')

неверно, так как onclick должен быть назначен на ссылку функции, а не сам результат вызова функции.

Он выполнит alert('Hi!'), когда страница будет загружена, но это не намерение здесь, не так ли? Целью назначения обработчика onclick является то, что при нажатии кнопки это предупреждение будет выполнено.

Для этого должно быть:

document.getElementById("myButton").onclick = function(){alert('Hi!')};

Кроме того, это не будет работать, если оно не обернуто внутри события window.onload:

window.onload = function(){
    document.getElementById("myButton").onclick = function(){alert('Hi!')};
};

Ответ 2

alert('Hi!') - это функция вызов, которая предупреждает "Привет" и ничего не возвращает (undefined).

onclick ожидает получить функцию, и вы передаете результат вызова функции, который равен undefined.

Так как JavaScript не является сильной типизированной структурой, вы не получаете ошибку при неудачных назначениях.

Так почему же работает следующая работа:

<button id = "myButton" onclick="alert('Hi!')">

Это потому, что html-парсер (в данном случае ваш браузер) выполняет некоторую работу за кулисами и завершает вызов функцией.

Ответ 3

document.getElementById("myButton").onclick ожидает, что функция будет вызвана позже.

<button id = "myButton "onclick="alert('Hi!')"> ожидает, что блок кода будет выполнен позже.

Ответ 4

alert('Hi')

Здесь alert - встроенная функция, вызываемая браузером, которая открывает окно предупреждения.

function callAlert(){
  alert('Hi');
}

Здесь callAlert - это настраиваемая функция, которая вызывает встроенную функцию alert

В вашем примере при добавлении события click вы должны определить функцию

document.getElementById("myButton").onclick = alert('Hi!') //alert is

уже выполнен

document.getElementById("myButton").onclick = function (){ alert('Hi!') }; 
//a function is defined/declared which will be executed when the onclick action is performed