Question

我无法使用事件侦听器自我调用和侦听器工作。

以下代码执行该功能，但事件监听器不起作用：

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

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

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

addEventListener上的JavaScript自调用函数

2 个答案: