Почему круглые скобки используются для вызова функции внутри тега onClick элементов, а не в свойстве onclick элементов?

Question

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

<input type="button" value="Click" onClick="sayHello();" id="button1">
var b1=document.getElementById("button1");
b1.onclick=sayHello;

Почему мы используем скобки внутри атрибута onClick вышеуказанного элемента?

Answer 1

Из-за того, как работают встроенные события (т. Е. Указанные в качестве атрибутов HTML).

Они, как правило, плохая идея по множеству причин (см. Много связанных сообщений), но ответ на ваш вопрос таков.

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

sayHello(); //<-- invoke callback

Если вместо этого выполнить следующее, ничего не произойдет:

sayHello; //returns reference to callback to nowhere

Answer 2

Если вы написали 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.log("hello"); };
    }

    b1.onclick=sayHello();
</script>

Это будет работатьconsole.log при каждом нажатии кнопки b1.

В случае атрибутов HTML они являются строками.Вы можете думать о назначении onClick в атрибуте HTML как о приблизительно эквивалентном этому JavaScript:

b1.onclick = eval("sayHello()");