Вызов обработчиков событий в элементах dom

Question

Я начну вопрос с примера. В React мы можем передать обработчик события элементу, не вызывая его напрямую, и он получит событие в качестве аргумента.

Но используя чистые JS и HTML, мы не можем этого сделать. Я попытался выполнить следующий код:

 <i 
   class="material-icons remove-button" 
   onclick="PhotoUpload.removeOldPhoto"
  >
    clear
  </i>

Вместо:

<i 
  class="material-icons remove-button" 
  onclick="PhotoUpload.removeOldPhoto(event)"
>
  clear
</i>

И только второй называется. Почему причина такого поведения?

Answer 1

Поскольку встроенные события нулевого уровня DOM, подобные этому, при указании в HTML оцениваются .

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

PhotoUpload.removeOldPhoto

... если указано JavaScript, это ссылка на функцию, а не вызов единицы.

PhotoUpload.removeOldPhoto()

... является вызовом.

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

someElement.onclick = myfunc; //not myfunc();