浏览器如何确定事件监听器函数中的事件对象参数？

Great question! It’s one of those things that feels like magic until you peek under the hood—let me break it down simply.

When you attach an event listener (like using addEventListener()), here’s what happens when the event fires:

• The browser creates the event object (with all those properties you listed: bubbles, target, etc.)
• The browser calls your event handler function directly, and automatically passes the event object as the first argument to that function.

The name you give to that argument doesn’t matter at all—e, event, goldfish, pizza... it’s just a variable name you’re using to reference the value the browser is already sending to your function as the first parameter.

Example to make it concrete: #

// 我们把参数命名为"goldfish"，完全没问题
function handleButtonClick(goldfish) {
  console.log(goldfish.type); // 输出 "click"
  console.log(goldfish.target); // 输出触发点击的按钮元素
}

document.querySelector('button').addEventListener('click', handleButtonClick);

What if you don’t define any parameters? #

If your function doesn’t have a parameter (like function handleClick() {}), you won’t have a local variable pointing to the event object. In non-strict mode, you could still access it via the old window.event property, but that’s a legacy IE-era quirk and not recommended—using the first parameter is the standard, cross-browser way.

Think of it like this: #

You can simulate the browser’s behavior yourself with a simple function. The browser is just doing something similar when it triggers your event handler:

// 模拟浏览器触发事件的逻辑
function browserTriggersEvent(callback) {
  // 创建事件对象
  const eventObject = { type: 'click', target: document.querySelector('button') };
  // 调用你的回调函数，把事件对象作为第一个参数传进去
  callback(eventObject);
}

// 你的处理函数，参数叫什么都行
function myHandler(pizza) {
  console.log(pizza.type); // 输出 "click"
}

// 触发模拟事件
browserTriggersEvent(myHandler);

At the end of the day, it’s just basic JavaScript function parameter behavior: when a function is called, arguments are passed in order, and your function’s parameters catch those values by their position—not their name.

内容的提问来源于stack exchange，提问作者Rounin