Как правильно делегировать событие?

Question

[Reflections]

Есть выпадающее вертикальное меню со списком городов


Цель: при клике на любой город его название должно подставляться в нужный div (вместо City Name). Кол-во городов может быть сколько угодно большое. Понимаю, что реализуется через event.target, не могу сообразить как сделать самостоятельно.

Заранее благодарю за помощь.

Comments

[FrelFrloich]

не обязательно через ивент таргет. В песочницу скиньте кусок разметки с какимнить инпутом или что у вас будет вместо него.

[Reflections]

FrelFrloich,

<div class="city_select">
	<div class="city_inner">
		<div class="city_name">Select your city</div>
		<span class="arrow">▼</span>
		<ul class="city_dd hide">
			<li class="dd_item">New-York</li>
			<li class="dd_item">Moscow</li>
			<li class="dd_item">Almaty</li>
			<li class="dd_item">Amsterdam</li>
			<li class="dd_item">Tokyo</li>
		</ul>
	</div>
</div>

[FrelFrloich]

Reflections, проснулся только, это надо было?

const container = document.querySelector('.city_name')
const btn = document.querySelectorAll('.dd_item')

for (let index = 0; index < btn.length; index++) {
    const element = btn[index]

    element.addEventListener('click', (e) => {
        var text = element.textContent
        container.textContent = text
    })
}

версия через таргет

const container = document.querySelector('.city_name')
document.addEventListener('click', (e) => {
    var target = e.target.closest('.dd_item')
    if (target) {
        target = target.textContent
        container.textContent = target
    }
})

[Reflections]

FrelFrloich, благодарю. Теперь более-менее понятно.
Это тестовый проект, поэтому дедлайнов не было.

Спасибо еще раз.