调用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属性的属性进行对比，情况相反-您应指定函数 reference 而不是 invocation 。

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