JavaScript addEventListener 上的自调用函数

Question

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

以下代码执行函数，但事件监听器不工作：

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

该函数将设置网站格式所必需的（从一开始就是动态的）CSS 样式。 "resize" 函数必须在加载时执行。是否可以做到这一点，或者我应该创建一个单独的自调用函数并在事件监听器上调用它？

Answer 1

当您立即调用该函数时，它的 return 值将放在它的位置 (window.addEventListener('resize', undefined))。相反，在事件侦听器之外定义您的函数，然后添加并调用它。

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

从技术上讲，您可以使用 self-invoking 函数完成这项工作，但它有点麻烦，我不建议这样做。

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

Answer 2

您的 IIF return 未定义，但事件侦听器必须是一个函数，或者 link 才能运行。将 return 添加到您的 IIF 或传递函数：

匿名函数：

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

IIF，return是一个函数

 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;
})())

JavaScript addEventListener 上的自调用函数

JavaScript Self Invoking Function on addEventListener

javascript

addeventlistener

self-invoking-function