一.传统注册事件的方式

原生JS中DOM操作，有俩种绑定事件的方式，我们一开始学习接触到的一定是使用下面这样的传统方式来绑定事件：

比如onclick、onmouseover等等，都是以on开头的

element.onclick = function(){
    //执行语句
}

这样的传统方式具有唯一性，也就是说同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖掉之前的处理函数，使用不方便

二.方法监听注册事件

element.addEventListener('click',function(){
    //执行语句
})

//模板
element.daaEventListener(type,listener[,useCapture])
//type是事件类型字符串
//listener是事件处理函数，事件触发时，调用该监听函数
//useCapture是一个布尔值，默认为false（是一个可选参数）
//false就是在事件冒泡了阶段执行（从当前元素向顶级对象冒泡）
//true就是在事件捕获阶段执行（从顶级对象向当前对象捕获）

这样的话我们就不需要在事件前加on了，并且同一个元素同一事件我们可以注册多个监听器，按顺序依次执行

<body>
    <button>点我</button>
</body>
<script>
  const btn = document.querySelector('button')
  btn.addEventListener('click',function(){
      alert('第一次')
  })
  btn.addEventListener('click',function(){
      alert('第二次')
  })
</script>

这俩次事件依次连续执行，不会产生冲突

我们作为了解其实还有一种方法可以监听事件（可以替换addEventListener()）：

btn.attachEvent('onclcik',function(){
    //执行回调函数语句
})

这个是一个非标准的方法，只是为了解决一些I9以下兼容性（解决addEventListener的兼容性），并且事件还需要带on，推荐选择使用addEventListener()

不过好像还不能使用，我们可以封装一个函数，来解决兼容性问题，作为了解就好，我们一般不使用attachEvent：

//封装函数，依次传参
function addEventListener(element,evenName,callback){
    //如果I9以上（支持addEventListener）使用这个
    if(element.addEventListener){
        element.addEventListener(evenName,callback)
    //如果I9以下（不支持addEventListener）使用这个
    }else if(element.attachEvent){
        element.attachEvent('on' + evenName,callback)
    }else{
    //如果俩个都不支持，那么使用传统方式
        element['on' + evenName] = callback
    }
}

三.删除事件

传统删除事件方式：

element.onclick = null

const btn = document.querySelector('button')
//点击事件调用删除函数
btn.addEventListener('click',remove)

//删除事件函数
function remove(){
    alert('1')
    btn.removeEventListener('click',remove)
}

如果我们使用的是attachEvent的话，对应删除方法为：detachEvent