关于点击事件onclick 和 addEventListener的思考

关于点击事件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 二次点击');
});