javascript - Object.entries和addEventListener

我有这个对象，我想在创建的选项中显示键，并在.info <p>标记中显示值。然后，当我使用addEventListener更改城市时，我想更改信息文本。

我的问题是，是否可以在info中的for(const [city, info] of entries)中使用addEventListener function？我试图将eventListener放在for循环中，但是效果不佳。但是我可以以某种方式将信息传递给另一个功能吗？还是只循环键，然后对addEventListener函数中的值再循环一次还是更好？

let citiesWithInfo = {"New York": 'The biggest city in the world.',
    "Los Angeles": 'Home of the Hollywood sign.',
    "Maui": 'A city on the beautiful island of Hawaii.',
    "Vancover": 'It\'s a city where it rains alot. And I mean alot.',
    "Miami": 'The samba city of the world.'
};

const cityWithInfoPrompt = document.querySelector('#cities-with-info');
const entries = Object.entries(citiesWithInfo);

for(const [city, info] of entries) {
    let optionCity = document.createElement("option");
    optionCity.textContent = city;
    optionCity.value = city;
    cityWithInfoPrompt.appendChild(optionCity);

    let currentCity = cityWithInfoPrompt.options[cityWithInfoPrompt.selectedIndex];
    if(currentCity.textContent == city) {
        document.querySelector(".info").textContent = info;
    }
}

<body>
    <select name="cities-with-info" id="cities-with-info"></select>
    <p>Info: <span class="info"></span></p>
    <script src="eventTarget.js"></script>
</body>

最佳答案

您可以将事件附加到循环之外，在该循环中可以在选定值和对象属性名称之间匹配值：

let citiesWithInfo = {"New York": 'The biggest city in the world.',
    "Los Angeles": 'Home of the Hollywood sign.',
    "Maui": 'A city on the beautiful island of Hawaii.',
    "Vancover": 'It\'s a city where it rains alot. And I mean alot.',
    "Miami": 'The samba city of the world.'
};

const cityWithInfoPrompt = document.querySelector('#cities-with-info');
const entries = Object.entries(citiesWithInfo);

for(const [city, info] of entries) {
    let optionCity = document.createElement("option");
    optionCity.textContent = city;
    optionCity.value = city;
    cityWithInfoPrompt.appendChild(optionCity);
}

cityWithInfoPrompt.addEventListener('change', function(){
  let currentCity = this.options[this.selectedIndex].value;
  document.querySelector(".info").textContent = citiesWithInfo[currentCity];
});
// On page load
// Create event
var event = new Event('change');
// Dispatch the event
cityWithInfoPrompt.dispatchEvent(event);

<body>
    <select name="cities-with-info" id="cities-with-info"></select>
    <p>Info: <span class="info"></span></p>
    <script src="eventTarget.js"></script>
</body>

使用Arrow Function（() => {}）和Event.target的解决方案

let citiesWithInfo = {"New York": 'The biggest city in the world.',
    "Los Angeles": 'Home of the Hollywood sign.',
    "Maui": 'A city on the beautiful island of Hawaii.',
    "Vancover": 'It\'s a city where it rains alot. And I mean alot.',
    "Miami": 'The samba city of the world.'
};

const cityWithInfoPrompt = document.querySelector('#cities-with-info');
const entries = Object.entries(citiesWithInfo);

for(const [city, info] of entries) {
    let optionCity = document.createElement("option");
    optionCity.textContent = city;
    optionCity.value = city;
    cityWithInfoPrompt.appendChild(optionCity);
}

cityWithInfoPrompt.addEventListener('change', () => {
  let currentCity = event.target.value;
  document.querySelector(".info").textContent = citiesWithInfo[currentCity];
});
// On page load
// Create event
var event = new Event('change');
// Dispatch the event
cityWithInfoPrompt.dispatchEvent(event);

<body>
    <select name="cities-with-info" id="cities-with-info"></select>
    <p>Info: <span class="info"></span></p>
    <script src="eventTarget.js"></script>
</body>

关于javascript - Object.entries和addEventListener，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58375202/

addeventListener

javascript - Object.entries和addEventListener