addEventListener('event'， callback) vs addEventListener('event'， function() { callback() })

Question

我想知道…

document.addEventListener('DOMContentLoaded', function() { callback() });

和

document.addEventListener('DOMContentLoaded', callback);

我见过这样的代码，我很好奇为什么他们把函数放在一个匿名函数里面。

var on_load = function(f) {
if (document.body === null)
document.addEventListener('DOMContentLoaded', function() { f() }, false)
else
f()
}

Answer 1

有明显的区别。第一个例子没什么用，因为回调函数被剥夺了事件参数:

document.addEventListener('DOMContentLoaded', function() { callback() });

而这个

document.addEventListener('DOMContentLoaded', callback);

如果callback的值是一个函数，则将该事件作为第一个参数调用，并将其事件处理程序正在处理该事件的元素作为this参数调用。

如果你问，

document.addEventListener('DOMContentLoaded', function() { callback.apply(this, arguments) });

和

document.addEventListener('DOMContentLoaded', callback);

那么答案是:除了一个额外的间接。