为什么当我按下按钮时，我的 output 会乘以？ 我希望它每次点击都有一个 output

Question

const btn = document.querySelector('button')
let x = 0

const load = ()=>{
    btn.addEventListener('click',()=>{
        console.log(x++)
        load()
    })
}
load()

first click: 0
second click: 1, 2
third click: 3, 4, 5, 6
fourth click: 7, 8, 9, 10, 11, 12, 13, 14

Please help how to make my output into this:
first click: 0
second click: 1
third click: 2
fourth click: 3

Answer 1

load registers an event handler. If the event handler calls load again it will add yet another event handler, etc.

Just don't call load inside the event handler. There isn't even a reason to define load at all:

const btn = document.querySelector('button');
let x = 0;

btn.addEventListener('click',() => {
  console.log(x++)
});

Answer 2

Inside your event listener, you are invoking the load function, which registers the listener again. First time, you have 1 listener. When you press the button, your listener increases x and logs it, and invokes load which registers the listener for a second time. Next time you press the button, ...