IIFE和eventListeners如何工作？

我正在爲js vanilla編寫一個天氣應用程序，用於功能性編程練習。IIFE和eventListeners如何工作？

在主頁中，您有一個簡單的輸入標記，您可以在其中輸入要預測的城市名稱。當您點擊輸入按鈕時，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(); 
 
    } \t 
 
    }); 
 
})();

And this is the input tag: 
 

 
<input type="text" class="banner__input" value="Milan" autofocus onfocus="this.value = this.value;">

來源

2017-08-29 Nadyn G

您的代碼中唯一的IIFE，與事件偵聽器沒有任何關係...... –

問題不明確。您的IIFE通過從DOM中選擇輸入並添加事件監聽器來實現副作用。 –

如何IIFE和事件監聽器togheter工作？

他們或多或少都沒有。

在這個上下文中，IIFE除了爲局部變量和常量（在本例中爲input）提供一個作用域外，不存在任何內容。

IIFE唯一能阻止const input成爲全球性的。

怎麼做IIFE知道一個鍵被取消按下了嗎？

它沒有。

當keyup事件觸發時，綁定爲事件偵聽器的函數被瀏覽器調用。

IIFE已經在那個階段運行。剩下的就是範圍。

好吧，我已經登記在輸入標籤

是

的事件，但它是寫在IIFE

並不真正相關的內部。

那麼，IIFE如何知道事件已被解僱？

它沒有。您傳遞給addEventListner的事件處理函數由瀏覽器調用。

我的意思是，我沒有將任何事件傳遞給該函數。

不，瀏覽器通過事件。

來源

2017-08-29 13:29:47 Quentin

非常詳細的answear，你清除了我所有的疑惑。感謝您的時間！ –

怎麼做IIFE知道一個鍵被取消按下了嗎？好的，我已經在輸入標籤上註冊了一個事件，但是它被寫入了IIFE。那麼，IIFE如何知道事件已經被解僱呢？我的意思是，我沒有將任何事件傳遞給該功能。事件的註冊不應該是IIFE之前的一個步驟？

IIFE對th事件一無所知。這只是一個立即運行然後退出的函數。所以它只是在它的內部運行代碼，就這些。

事件處理程序是唯一與事件有關的事情。

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

這是您傳遞給.addEventListener的函數。在內部，它與input元素相關聯，因此事件系統可以在該事件發生時調用它。

請注意，您在這裏不需要IIFE。您可以使用this或event.currentTarget參考input。

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

來源

2017-08-29 13:29:34 spanky

當你點擊進入按鈕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。

來源

2017-08-29 13:30:29 Bergi

IIFE和eventListeners如何工作？

回答

相關問題