Of the two ways to add click events to a button object, why does one use onclick, and the other uses click?

<button id="btn"></button>
button:
1:
  var btn = document.getElementById("btn");
  btn.onclick = function(){
      alert("HelloWorld");
  }
2:
  function hello() {
      alert("addEventListener()");
  }

  var btn = document.getElementById("btn");
  btn.addEventListener("click", hello, false);

when these two methods add click events to button objects, why does one use onclick and the other uses click ?

Aug.17,2021

Hello, landlord! You can refer to this article, Portal . Hope to be helpful to you ~


you call addEventListener to know that you are adding an event
but btn.click = function () {} , how do you know it is an event? Or a normal attribute?
add on to know that it is an event

addEventListener ('click') = onclick


because one is DOM0-level event handling and the other is DOM2-level event handling. About the dom event level, it is mentioned in the Red Treasure Book. You can also take a look at this article: https://blog.csdn.net/secret5.

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9e20e-19b0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9e20e-19b0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?