js绑定点击事件

• onclick 点击事件
• addEventListener() 方法用于向指定元素添加事件句柄。
  https://www.runoob.com/jsref/met-element-addeventlistener.html

demo

    <!-- 原生js绑定点击事件 -->
    <div class="ys-btn">
      <button class="btnA">addEventListener</button>
      <button class="btnO">onclick</button>
    </div>

window.onload = function () {
  
  let btnA = document.querySelector(".btnA");

  btnA.addEventListener("click", function (e) {
    alert("addEventListener绑定点击事件", e);
  });


  let btnO = document.querySelector(".btnO");

  btnO.onclick = function (e) {
    alert("onclick绑定点击事件", e);
  };

};

报错

main.js:338 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

把代码放到window.onload=function(){...}里面，因为如果页面还没加载到btn按钮而且你就调用了querySelector,返回的对象是undefined.