Question

我正在js vanilla中编写一个天气应用程序，用于函数式编程。

在主页中，您有一个简单的输入标记，您可以在其中输入要进行预测的城市名称。当您按下Enter按钮时，IIFE（在代码段中）会被触发并实际启动整个应用程序。

现在我有一些与IIFE相关的问题，因为它有效，但我不确定该代码实际上是如何工作的（也许它是用糟糕的baaaad baaaaaaaad练习写的）：

IIFE如何知道某个键未被按下？好的，我在输入标签上注册了一个事件，但是它写在了IIFE中。那么IIFE如何知道事件被解雇了？我的意思是，我没有将任何事件传递给该函数。该活动的注册不应该是IIFE之前（退出）的一步吗？

我认为很明显我有点困惑。

(() => {
 const input =      document.querySelector('.banner__input');
  input.addEventListener("keyup", event => {
    event.preventDefault();
    if (event.keyCode == 13) {
      console.log('The city is: ' + input.value);
      currentWeather();
      threeHoursForecasts();
      toggleForecasts();
    }	
  });
})();

And this is the input tag:

<input type="text" class="banner__input" value="Milan" autofocus onfocus="this.value = this.value;">

Answer 1

IIFE和eventListener如何工作？

他们或多或少没有。

此上下文中的IIFE除了为局部变量和常量（在本例中为input）提供范围外，什么也不做。

IIFE唯一能做的就是阻止const input成为全球性的。

IIFE如何知道某个键未被按下？

它没有。

当keyup事件触发时，浏览器会调用绑定为事件侦听器的函数。

IIFE已经在那个阶段运行。剩下的就是范围。

好的，我在输入标签上注册了一个事件

是

但它写在IIFE内部

不太相关。

那么IIFE如何知道事件被解雇了？

它没有。传递给addEventListner的事件处理函数由浏览器调用。

我的意思是，我没有将任何事件传递给该功能。

不，浏览器会传递该事件。

Answer 2

IIFE如何知道某个键未被按下？好的，我在输入标签上注册了一个事件，但是它写在了IIFE中。那么IIFE如何知道事件被解雇了？我的意思是，我没有将任何事件传递给该功能。该活动的注册不应该是IIFE之前（退出）的一步吗？

IIFE对此事件一无所知。它只是一个立即运行然后退出的功能。因此，它只是在其正文中运行代码，而这就是全部。

事件处理程序是唯一与事件有关的事情。

event => {
  event.preventDefault();
  if (event.keyCode == 13) {
    console.log('The city is: ' + input.value);
    currentWeather();
    threeHoursForecasts();
    toggleForecasts();
  } 
}

这是您传递给.addEventListener的功能。在内部，它与input元素相关联，因此事件系统可以在事件发生时调用它。

请注意，此处不需要IIFE。您可以使用input或this引用event.currentTarget。

document.querySelector('.banner__input')
  .addEventListener("keyup", event => {
    event.preventDefault();
    if (event.keyCode == 13) {
      console.log('The city is: ' + this.value);
      currentWeather();
      threeHoursForecasts();
      toggleForecasts();
    }   
  });

另请注意，即使您确实希望保留对input或其他内容的引用，您仍然不需要IIFE。只要您使用let或const来声明变量，就可以使用块语句。

{ // The `input` is scoped to this block
  const input = document.querySelector('.banner__input');

  input.addEventListener("keyup", event => {
    event.preventDefault();
    if (event.keyCode == 13) {
      console.log('The city is: ' + input.value);
      currentWeather();
      threeHoursForecasts();
      toggleForecasts();
    }   
  });
}

Answer 3

当您点击输入按钮时，IIFE（在代码段中）会被解雇

没有。在加载脚本时，会立即调用IIFE（正如其名称所示）。事实上，IIFE根本就没有必要，你可以简单地写一下

document.querySelector('.banner__input').addEventListener("keyup", event => {
  event.preventDefault();
  if (event.keyCode == 13) {
    console.log('The city is: ' + this.value);
    currentWeather();
    threeHoursForecasts();
    toggleForecasts();
  } 
});

具有完全相同的效果。

IIFE如何知道某个键未被按下？好的，我在输入标签上注册了一个事件，但它写在IIFE中。

IIFE不知道。您传递给addEventListener的回调函数将会被调用。 addEventListener正在进行注册。

我的意思是，我没有将任何事件传递给该功能。

是的，当事件发生时，event确实来自DOM。

IIFE和eventListeners如何工作？

3 个答案: