给dom元素绑定js事件的三种方式

1. 在html标签中直接绑定；
2. js中获取到相应的dom元素后绑定；
3. 使用addEventListener方法实现绑定；

<!--html内直接绑定 -->
    <button onclick="alert('执行了html绑定的方法')"></button>

这种写法维护性差，用的很少。

<button class="btn">dom0级绑定事件</button>
var btn = document.querySelector('.btn')
btn.onclick = function (e) {
  console.log(e)
}

首先获取dom，再给dom绑定指定事件，优点兼容好，缺点一个事情不能多次绑定。

<button class="btn">dom2级绑定事件</button>
var btn = document.querySelector('.btn')
btn.addEventListener('click',function(){},false)

获取dom后，通过addEventListener方法添加指定事件，它接受三个参数，第一添加的事件名，第二事件监听函数，第三是否冒泡或捕获。dom2级绑定事件也可以移出事件，代码如下：

// 使用removeEventListener()移除事件
btn.removeEventListener('click',function(){},false)