也许我们应该从澄清一些事情开始。
浏览器中的事件，更像是一个“嵌套层次结构”，然后是一个队列——它的工作原理被称为事件冒泡——[维基百科][1]
但是，本质上，当添加一个 EventListener 时，您正在做的事情是连接到 DOM 的一个或多个点，然后说，嘿，当 X 事件经过这里时，使用函数 Y 处理它，然后再将它向上传递堆栈。
一旦“添加”了 EventListener，它就会保持活动状态，等待获得事件。它的具体作用在其处理函数中定义。
let myYFunction = function( e ) { ... }
let myXListener = baton.addEventListern('X event', myYFunction );
// at this point, anytime 'X event' happens to baton, myYFunction will
// be called to handle it...
现在让我们看看你的例子，让我们把事情分解一下，
const baton = document.querySelector('button');
第一行，只是查询 DOM，在页面中找到第一个类型为“按钮”的元素。对...这是我们要插入事件处理程序的“位置”。我们可以将它们添加到任何元素，在 DOM 中的任何位置，如果我们愿意，我们甚至可以挂钩到“body”元素。
好的，那你有这个了，
baton.addEventListener('mousedown', (e) => {
console.log('baton');
baton.addEventListener('click', (e) => {
console.log('baton click');
});
});
这是“嵌套”“click”事件侦听器的创建，但仅在“处理”“mousedown”事件之后。没有真正的理由必须在 mousedown 处理程序的函数体中注册 'click' 事件。
如果我们稍微重写一下，可能会更清楚实际发生了什么。
baton.addEventListener('mousedown', (e) => {
console.log('baton mousedown');
}
baton.addEventListener('click', (e) => {
console.log('baton click');
});
此外，我还要指出，目前它的工作方式“有效”——但它实际上隐藏了一点草率的编码......你每次触发“mousedown”事件时都会看到一个新的' click' eventListener 正在注册...所以最终您可能会得到很多很多点击处理程序来响应单个 'click' 事件...查看 MDN 以了解有关 [this][2]
的更多信息>
我希望这能回答您最初关于发生了什么的问题。
对于您的问题“当我单击一个按钮时，我会在控制台中记录 'baton' 和 'baton click'。现在我的问题是这里到底发生了什么？” -- 对我来说，它看起来像这样：
- 添加了“mousedown”事件监听器，但没有“执行”
- 'mousedown' 事件发生，现在您的 'mousedown' 侦听器执行它的函数，该函数又注销到控制台，并注册一个新的 'click' 处理程序 - 但同样没有执行。
接下来，对于指挥棒看到的每个“鼠标按下”，都会重复第 1 步和第 2 步。此外，对于通过接力棒传递的任何“点击”事件——在接力棒上的每次“鼠标按下”之后都会发生：
- 发生“点击”事件，然后执行“点击”处理程序并注销到控制台。
SPA 事件处理策略
在使用 SPA 时，显示多个“页面”，在同一个页面加载中......它可能会变得一团糟，所有这些事件监听器都在周围堆积在一起。如果您打算在 SPA 的“页面”之间使用 eventListeners，您可能还想研究如何“删除”它们。 - [MDN][3]
这样，您的 SPA 的当前“页面”只有活动监听器。
另外，考虑“泛化”您的处理程序，并将它们附加到 DOM 中更高的位置...这将允许您只有少数事件侦听器将事件“路由”到它们的“逻辑”处理程序。
随机/不同的行为
通过上面概述的步骤，1、2 和 3 以及它们如何不会同时发生。您将看到似乎是随机输出到控制台的内容...尝试运行类似的内容，以获得正确的感觉：
let cCount = 0;
let mCount = 0;
let tCount = 0;
const baton = document.querySelector('button');
baton.addEventListener('mousedown', (e) => {
console.log('mousedown # ' + (mCount++) + ' order:' + tCount++);
baton.addEventListener('click', (e) => {
console.log('click # ' + (cCount++) + ' order:' + tCount++);
});
});
[1]：https://en.wikipedia.org/wiki/Event_bubbling#:~:text=Event%20bubbling%20is%20a%20type,Provided%20the%20handler%20is%20initialized)。
[2]：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
[3]：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener