请问这段代码点击页面后为什么只打印 1 2 而不是 1 2 1(标签-前端|关键词-前端问题)

问一个前端问题，请问这段代码点击页面后为什么只打印 1 2 而不是 1 2 1 ？

var listenerOne = function(e) { console.log('1'); };
var listenerTwo = function(e) { console.log('2'); };

document.addEventListener('click', listenerOne);
document.addEventListener('click', listenerTwo);
document.addEventListener('click', listenerOne);

在 JavaScript 中，事件监听器列表会自动过滤重复的回调函数。当你多次使用 addEventListener 绑定同一个回调函数时，只会在监听器列表中添加一次该回调函数。因此，无论你绑定了多少次，每次触发事件时，该回调函数都只会执行一次。

如果要打印1 2 1可以这么写：

document.addEventListener("click", () => listenerOne());
document.addEventListener("click", listenerTwo);
document.addEventListener("click", () => listenerOne());

引用 皆我百晓生 小程序回复内容作答：

这是因为在这段代码中，两个监听器被添加到了click事件上，当点击页面时，两个监听器都会被触发。但是它们被触发的顺序是不确定的，所以可能先打印出1再打印出2，也可能反过来先打印2再打印1。

如果你希望保证打印的顺序是先1后2，可以使用addEventListener的第三个参数来指定事件触发时的顺序，如下所示：

document.addEventListener('click', listenerOne, false);
document.addEventListener('click', listenerTwo, false);

设置第三个参数为false表示使用冒泡阶段触发事件，而不是捕获阶段。默认为false，所以不设置第三个参数也可以达到同样的效果。

document.addEventListener('click', function(){
                listenerOne()
                listenerTwo()
                listenerOne()
            });  

【以下回答由 GPT 生成】

问题分析： 这段代码并非Vue.js代码，而是普通的JavaScript代码。在这段代码中，我们给页面上的document元素添加了三个click事件监听器，分别是listenerOne、listenerTwo和listenerOne。当页面被点击时，这三个监听器会依次触发，并在控制台上打印出相应的信息。

解决方案： 这段代码之所以只会打印出1和2，而不打印1 2 1，是因为在listenerOne函数重复添加了两次。在同一个事件上重复添加相同的监听器不会起作用，因为事件监听器的重复添加会被浏览器忽略。

如果想要打印出1 2 1，可以按照如下的方式重构代码：

var listenerOne = function(e) { 
  console.log('1');
  document.removeEventListener('click', listenerOne);
};
var listenerTwo = function(e) { console.log('2'); };

document.addEventListener('click', listenerOne);
document.addEventListener('click', listenerTwo);
document.addEventListener('click', listenerOne);

在重构后的代码中，当listenerOne函数被触发后，我们通过调用document.removeEventListener('click', listenerOne)将其从click事件的监听器列表中移除。这样，在下次点击时，listenerOne只会被触发一次，就能打印出1 2 1的结果了。

希望以上解答对你有帮助，如果还有其他问题，请继续提问。

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7503836
• 你也可以参考下这篇文章：【汽车配件管理系统-管理员-配件管理模块】配件管理分类
• 您还可以看一下 梁瑞老师的低代码：从零开始搭建库存管理系统课程中的 课时1：物品类目维护小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 随机位置显示图片不重叠前端实现详细讲解附效果图，代码可直接使用中的 先看看效果图 部分也许能够解决你的问题。