html 元素的 onEvent 与 addEventListener

对于 html 元素的 onEvent，我们想要给其添加 function handler() {}，有时候会弄不清楚到底是添加

<div onEvent="handler">

还是添加

<div onEvent="handler()">

下面两段等价的代码说明了问题

<input type="file" onchange="showFile(this)">

<script>
function showFile(input) {
  let file = input.files[0];

  alert(`File name: ${file.name}`); // 例如 my.png
  alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824
}
</script>

等价于

<input id='myFile' type="file" >

<script>

myFile.addEventListener('change', handler)

function handler(event) {
  showFile(this); // 这里的 this 就指向了 myFile
}
function showFile(input) {
  let file = input.files[0];

  alert(`File name: ${file.name}`); // 例如 my.png
  alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824
}
</script>

即我们应当添加

<div onEvent="handler()">