2020-11-15添加事件和事件对象

添加事件和事件对象

• 元素.on事件名

• 注意：

  • 事件不可绑定多个，后面绑定的会覆盖前面的

• 格式：

  let oBtn=document.querySelector("button");
  oBtn.onclick=function () {
      alert(123);
  }
  

---

• addEventListener

• 注意：

  • IE9以上才可使用
  • 事件不加on
  • 事件可绑定多个

• 格式：

  let oBtn=document.querySelector("button");
  oBtn.addEventListener("click", function () {
      alert(123);
  })
  

---

• attachEvent

• 注意：

  • IE9以下才可使用
  • 事件可绑定多个，后绑定的先执行

• 格式：

  let oBtn=document.querySelector("button");
  oBtn.attachEvent("onclick",function () {
      alert(123);
  });
  

---

• 兼容写法：

  //addEvent(元素,事件名,回调函数)
  function addEvent(ele, name, fn) {
      if (ele.addEventListener) {
          ele.addEventListener(name, fn);
      } else {
          ele.attachEvent("on" + name, fn);
      }
  }
  

---

• 事件对象

• 兼容写法：event = event || window.event

• 格式：

  123