Js事件监听处理从最开始的on逐渐衍化成了addEventListener.
如ele.onclick之类的事件处理 变成了ele.addEventListener(‘事件名’,’响应函数’,事件响应方式)
addEventListener最初是监听鼠标如点击之类的事件，后来添加了对键盘按键事件的监听（演变历史）
看下面的代码，on会覆盖上一次的事件,也就是只弹出一次，addEventListener不会，所以会弹出多次 ，当然了，用addEventListener绑定的事件可以用removeEventListener来移除
注意绑定的时候最好使用具名函数而不是匿名函数。
addEventListener第三个参数可以选择是true或者false,默认是false.
true表示捕获方式响应，而false则是冒泡方式
ie8及更早浏览器不支持此方式
具体可以查看http://www.runoob.com/jsref/met-element-removeeventlistener.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="width:200px;height:200px; background: #999;" id="myOn"></div>
<div style="width:200px;height:200px; background: skyblue;" id="myAdd"></div>
</body>
</html>
<script>
let ele1 = document.getElementById('myOn')
let ele2 = document.getElementById('myAdd')
ele1.onclick = function () {
alert('on 第一次')
}
ele1.onclick = function () {
alert('on 第二次')
}
ele2.addEventListener('click', function () {
alert('add 第一次')
})
ele2.addEventListener('click', function () {
alert('add 第二次')
})
ele2.addEventListener('click', insertHtml)
function insertHtml() {
ele2.innerHTML = ele2.innerHTML + 'a'
ele2.removeEventListener('click', insertHtml) //如果去掉这行，那么点击一次就会多加一个a
}
</script>
来源：CSDN
作者：肾虚少年
链接：https://blog.csdn.net/woshidamimi0/article/details/89487920