javascript - 在 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 属性的属性进行对比，其中情况相反 - 您将指定一个函数引用，而不是 < em>调用。

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