onXXX的方式

• 格式:
  var oBtn = document.querySelector("button");
  oBtn.onclick = function(){}
• 注意点:
  • 由于添加了属性,所以后赋值的会覆盖先赋值的
  • 默认触发事件冒泡

addEventListener

• 接收三个参数:
  • 第一个参数: 事件名称
  • 第二个参数: 回调函数(事件需要做的事情)
  • 第三个参数: 函数的冒泡或者捕获, false冒泡 / true 捕获
• 注意点:
  • 事件名称不需要加on
  • 后写的事件不会覆盖先前写的事件
  • 兼容性问题: 只支持IE9以上的和高级浏览器, 低级浏览器用attachEvent

oBtn.addEventListener("click", function () {
   alert("addEventListener");
});

attachEvent

• 接收两个参数:
  • 第一个参数:事件名称
  • 第二个参数:回调函数(事件需要做的事情)
• 注意点:
  • 事件名称需要加上on
  • 后写的事件不会覆盖先前写的事件
  • 兼容性问题: 只支持低版本浏览器
  • 默认触发事件的冒泡

兼容性处理
function addEvent(ele, name ,fn) {
  if(ele.attachEvent){
       obj.attachEvent("on" +_name, fn);
    }else{
      obj.addEventListener(name,fn)
  }
}