时间戳

首页 > 解决方案 > 即使我们没有将事件对象传递给函数， addEventListener() 的回调函数如何工作

javascript - 即使我们没有将事件对象传递给函数， addEventListener() 的回调函数如何工作

问题描述

const eventHandler = function (eventObject) {
    console.log('You clicked on the page')
    console.log(eventObject)
}

document.addEventListener('click', eventHandler)

所以上面的代码，如你所见，我们正在监听页面上的点击事件，带有一个“分离的”回调函数，或者一个名为eventHandler. 您可以看到这个eventHandler函数需要一个eventObject参数，即事件对象本身。

你可以看到，当我将函数传递给eventHandleraddEventListener() 方法时，我没有传递任何参数，对吧？所以我没有将 eventObject 传递给它。但是，当我运行代码时，代码仍然没有错误地运行，所以当我点击页面时，我收到一条You clicked on the page消息和事件对象。

这是为什么？当它要求我们将事件对象作为参数传递给它而我们没有这样做时，该函数怎么能将事件对象记录到控制台中？这就是我的问题。我在玩 DOM 事件时遇到了这种情况，这真的让我很困惑。所以希望有人可以帮助我理解，这里发生了什么！非常感谢！

抱歉，您可能想自己运行此代码，稍后我将更新演示，非常感谢！

标签： javascriptevent-handlingdom-eventsaddeventlistener

解决方案

您不需要将事件作为参数传递给eventHandler您在文档 onclick 事件侦听器中调用的函数的原因是因为它已经在函数中注册了一个事件

const eventHandler = function (eventObject) {
  console.log('You clicked on the page')
  console.log(eventObject)
}

// document.addEventListener('click', eventHandler)
// This function above is the exact same as the one here below
// That's why it works, because the event object has already been passed to the function

document.addEventListener('click', function(eventObject){
  console.log('You clicked on the page')
  console.log(eventObject)
})
<h2>Click anywhere to run the function</h2>

推荐阅读