Почему скобки используются для вызова функции внутри тега onClick элементов, но не в свойстве onclick элементов?
Я прочитал в книге, что мы не должны использовать круглые скобки при назначении функции свойству onclick элемента.
<input type = "button" value = "Click" onClick = "sayHello();" id = "button1">
var b1=document.getElementById("button1");
b1.onclick=sayHello;
Почему мы используем круглые скобки внутри атрибута onClick вышеуказанного элемента?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Из-за того, как работают встроенные события (т. е. указанные как атрибуты HTML).
Как правило, это плохая идея по множеству причин (см. Много связанных сообщений), но ответ на ваш вопрос таков.
События, указанные как атрибуты HTML, выполняются в виде строк. По сути, когда элемент щелкнут, строка, указанная в качестве значения атрибута, будет оценивается (это должно дать вам ключ к разгадке одной из причин, по которой это плохая идея). По этой причине вы можете думать о событии, вызывающем запуск следующего JS:
sayHello(); //<-- invoke callback
Если бы вместо этого запускалось следующее, ничего бы не произошло:
sayHello; //returns reference to callback, to nowhere
Спасибо, это означает, что атрибут onClick и свойство onclick не совпадают.
Атрибуты и свойства — интересная тема. Иногда они идут в ногу; иногда они отделены друг от друга. Ключевой вывод — не использовать встроенные события; это плохая практика.
Если бы вы написали var b1.onclick=sayHello();, это вызвало бы функцию sayHello немедленно, а не ожидание события click. Вы бы хотели использовать эту технику, если ваша функция sayHello возвращает какое-то значение, которое вы хотите присвоить переменной, хотя это редко применимо при назначении свойства onclick (вероятно, не имеет смысла использовать ключевое слово var, поскольку вы сделать в примере).
Технически вы могли бы получить желаемые результаты от b1.onclick=sayHello();, если бы ваш код выглядел примерно так:
<button id = "b1">invoke sayHello</button>
<script>
var b1 = document.getElementById("b1");
function sayHello() {
return () => { console.info("hello"); };
}
b1.onclick=sayHello();
</script>
Это будет запускать console.info всякий раз, когда нажимается кнопка b1.
В случае HTML-атрибутов это строки. Вы можете думать о назначении onClick в атрибуте HTML как о приблизительном эквиваленте этого JavaScript:
b1.onclick = eval("sayHello()");