addEventListener上的JavaScript自调用函数

Question

我无法使事件侦听器自行调用并使侦听器正常工作的功能。

以下代码执行该函数，但事件侦听器不起作用：

window.addEventListener("resize", (function () {
document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
})())

该功能将设置网站格式必不可少的必需的CSS样式（从一开始就是动态的）。 “调整大小”功能必须在加载时执行。 有可能做到这一点，还是我应该创建一个单独的自我调用函数并在事件监听器上调用它？

Answer 1

当您立即调用该函数时，它的返回值被放在它的位置（ window.addEventListener('resize', undefined) ）。 而是在事件侦听器之外定义函数，然后添加并调用它。

function onResize() {
  document.getElementById('divMenu').innerHTML = document.getElementById("divTop").offsetWidth;
}
window.addEventListener('resize', onResize);
onResize();

从技术上讲，您可以使用自调用功能来完成这项工作，但这有点麻烦，我不建议这样做。

window.addEventListener('resize', (function onResize() {
  document.getElementById('divMenu').innerHTML = document.getElementById("divTop").offsetWidth;
  // Works because it returns a function
  return onResize;
})());

Answer 2

您的IIF返回undefined，但是eventlistener必须是一个函数或指向函数的链接。 将返回值添加到您的IIF或传递函数中：

匿名函数：

 window.addEventListener("resize", function () {
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
 }))

IIF，返回一个函数

 window.addEventListener("resize", (function () {
 return function(){
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
 }
 })())

编辑（在启动时调用分配）：

window.addEventListener("resize", (function () {
  function set_innerHtml(){
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
  }
  set_innerHtml();
  return set_innerHtml;
})())

Answer 3

出于某种原因，在我自己调用事件监听器后，我充满了仇恨。 又名：

function imAFunctionNeedlesslyAssignedGlobally(){
    display.textContent = input.value;
}
button.addEventListener('click', imAFunctionNeedlesslyAssignedGlobally);
imAFunctionNeedlesslyAssignedGlobally();

它看起来丑陋而可怕。 也许我有点挑剔，但是尽管如此，我还是很讨厌这个问题及其解决方案。 经过一番思考，我想到了这一点。 结果，我的代码看起来好多了。

Function.prototype.runAndReturnSelf = function(){
    this(...arguments);
    return this;
};

button.addEventListener('click', function(){
    display.textContent = input.value;
}.runAndReturnSelf());

优点：

• 简单美味
• 十分明确
• 只要看看那个匿名函数！ 完美的作用域！
• 每个事件侦听器减去两行代码

缺点：

• 我没有立即想到的