关于点击事件onclick 和 addEventListener的思考
基本写法
box.onclick = function(){
console.log('onclick 点击');
}
box.addEventListener('click', function(){
console.log('EventListener 点击');
});
onclick 和 addEventListener 联系
两者都可以监听到点击事件
onclick 和 addEventListener 区别
on执行事件的特点：
如果多次执行，会覆盖掉之前的执行，只保留最后一次
addEventListener执行事件的特点:
所有的事件都会被触发，遵循的是冒泡规律
addEventListener
语法
element.addEventListener(event, function, useCapture)
参数值
| 参数 | 描述 |
|---|---|
| event | 必须:指定事件名 |
| function | 必须:指定事件触发时执行的函数 |
| useCapture | 可选: 布尔值. true 事件句柄在捕获阶段执行 false 事件句柄在冒泡阶段执行 |
需求一:
假如有一个盒子，在页面的某一个地方，我需要监听盒子的点击。在请求完之后，我需要再次监听盒子的点击。也就是说，盒子会被多次点击，但是每次点击执行的东西不一样。
可以这样写:
box.onclick = function(){
console.log('onclick 电击');
}
box.onclick = function(){
console.log('onclick 二次点击');
}
思考一下，这样写有没有逻辑问题？语法问题？执行后是什么效果？
答案是:始终执行第二次，第一次点击被覆盖掉了
真正的需求是，每次点击都必须监听到，所以嘞？
box.addEventListener('click', function(){
console.log('EventListener 点击');
});
box.addEventListener('click', function(){
console.log('EventListener 二次点击');
});