Como adicionar evento de clique em múltiplos elementos?

Tenho uma lista de li e gostaria de adicionar um evento de click em todos eles.
Ao clicar, quero pegar o conteúdo e jogar em um outro elemento.

<ul>
    <li>Conteúdo 1</li>
    <li>Conteúdo 1</li>
    <li>Conteúdo 1</li>
    <li>Conteúdo 1</li>
    <li>Conteúdo 1</li>
</ul>

<div id="exibir"></div>

No exemplo, ao clicar no primeiro li, a div com id exibir deveria aparecer “Conteúdo 1”.

Você pode usar o document.querySelectorAll('<elemento>') para obter a lista de todos os elementos.

Em seguida, usamos o forEach para ter acesso a cada <li>.

Dessa forma podemos criar o evento de click para inserir o conteúdo do <li> no elemento #exibir.

Exemplo

Vou adicionar um id no seu <ul> só para termos uma identificação.

HTML

<ul id="lista-conteudos">
    <li>Conteúdo 1</li>
    <li>Conteúdo 1</li>
    <li>Conteúdo 1</li>
    <li>Conteúdo 1</li>
    <li>Conteúdo 1</li>
</ul>

<div id="exibir"></div>

Javascript

// vamos obter todos os <li> da #lista-conteudos
const conteudos = document.querySelectorAll('#lista-conteudos li')

// pegamos o elemento #exibir
const exibir = document.querySelector('#exibir')

// loop em todos <li> para adicionar o evento
conteudos.forEach( (li) => {
  
    // criando evento de click no <li>
    li.addEventListener('click', (ev) => {

        // atribuindo no #exibir o conteúdo do <li>
        exibir.innerText = li.innerText

    })

});