Question

请在下面考虑以下代码：

element.addEventListener('click', function(event) { ... })

addEventListener方法的工作方式是，其第二个参数是将event对象作为第一个参数自动传递到的函数。

addEventListener如何做到这一点？是否涉及编程模式？

Answer 1

它称为回调，您可以在其中调用正在运行的函数内的function参数

var success = function(event){
    console.log(event);
}

function sample(data, callback){
    //peform data manipulation here
    var json = JSON.parse(data);
    callback(json);
}

var json = localStorage.getItem('user_data');

sample(json, success);

Answer 2

在这里看到的event只是变量的名称，稍后将在触发事件时使用该变量，而不是已经将事件作为参数传递了。您正在传递一个函数，该函数在触发事件时将与实际事件一起调用。

您可以实现一个带有EventEvent方法的EventListener对象，该方法将接收事件作为第一个参数。

使用函数传递变量也许更容易理解：

myCallback = function(event) {
  // do something with event
}

element.addEventListener('click', myCallback);

从内部（真正简化）开始，它会保存对该函数的引用，并在用户单击元素以实际运行该函数时以实际事件（诸如myCallback(event)之类的方式）对其进行调用。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

addEventListener（）如何自动接收事件对象参数？

2 个答案: