事件绑定与事件监听的区别
事件绑定：同一个对象，进行多次事件绑定，则后绑定的事件会覆盖之前绑定的事件，总之只能执行最后一个事件. -------- onclick
事件监听：同一个对象，进行多次事件监听，都会执行 -------addEventListener
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li data-id=1>1</li>
<li data-id=2>2</li>
<li data-id=3>3</li>
<li data-id=4>4</li>
</ul>
</body>
<script>
//事件绑定：同一个对象，进行多次事件绑定，则后绑定的事件会覆盖之前绑定的事件，总之只能绑定最后一个事件
let ul = document.querySelector('ul');
ul.onclick = function(e){
// 由于被覆盖，不会执行，
let {
target} = e;
let id = target.dataset.id;
console.log(`事件绑定：给ul绑定的第一个事件,${
id}`)
}
ul.onclick = function(e){
// 会执行，
let {
target} = e;
console.dir(target);
let id = target.dataset.id;
console.log(`事件绑定：给ul绑定的第二个事件,${
id}`)
}
//事件监听：同一个对象，进行多次事件监听，都会执行
ul.addEventListener('click',function(e){
// 会执行，
let {
target} = e;
console.dir(target);
let id = target.dataset.id;
console.log(`事件监听：监听ul的第一个事件,${
id}`)
})
ul.addEventListener('click',function(e){
// 会执行，
let {
target} = e;
console.dir(target);
let id = target.dataset.id;
console.log(`事件监听：监听ul的第二个事件,${
id}`)
})
</script>
</html>
点击后执行如下
