Eu tinha dificuldade de encontrar materiais com boas explicações sobre as diferenças de usar funções anônimas ou arrow functions para captar os eventos e qual o valor do parâmetro que muitas vezes é referenciado como event. Eu usei a Luri para me explicar e foi incrível, realmente abriu meus horizontes. Fiquei apenas com uma pequena dúvida, pois nas perguntas finais houve uma pequena confusão. Poderia confirmar então:
1- Ambas conseguem acessar diretamente o objeto do evento? 2- A diferença está no escopo que ambas alcançam? a arrow function tem o escopo limitado ao contexto em que está inserida e a função anônima não, seri isso? Isso acontece pois a arrow function não tem um objeto "this" a quem se referenciar?
Segue um trechinho da minha conversa com a Luri:
13. **Arrow functions também podem receber parâmetros?**
Sim, as arrow functions também podem receber parâmetros. Aqui está um exemplo de uma arrow function com parâmetros:
constsoma= (a, b) => {
returna + b;
};
console.log(soma(2, 3)); // Saída: 5
Nesse exemplo, a arrow function "soma" recebe dois parâmetros, "a" e "b", e retorna a soma dos dois valores quando é chamada. As arrow functions podem ter qualquer número de parâmetros, separados por vírgula, e esses parâmetros podem ser utilizados dentro do corpo da função para realizar operações ou retornar valores.
14. **Esses parâmetros também podem representar um evento desencadeado pelo escutador de eventos(Aqui surgiu a minha dúvida)?**
Não, os parâmetros de uma arrow function não podem representar diretamente um evento desencadeado por um listener de eventos. Ao contrário das funções regulares, as arrow functions não têm seu próprio valor para "this" e não têm acesso direto ao objeto de evento. Quando você define uma arrow function como um listener de eventos, o objeto de evento ainda está disponível, mas você precisa acessá-lo por meio da variável "event" ou qualquer outro nome que você tenha dado ao parâmetro da função. Aqui está um exemplo de uma arrow function como listener de um evento de clique:
constbotao = document.querySelector('#meuBotao');
botao.addEventListener('click', (event) =>{
console.log('Cliquei no botão!');
console.log('Tipo de evento:', event.type);
console.log('Elemento alvo:', event.target);
});
Nesse exemplo, a arrow function é definida como um listener para o evento de clique no botão. O objeto de evento é passado como parâmetro para a arrow function e pode ser acessado por meio do parâmetro "event". Dentro da função, podemos utilizar as propriedades do objeto de evento, como "type" (tipo de evento) e "target" (elemento alvo do evento), para realizar ações específicas com base no evento ocorrido. Portanto, embora as arrow functions não tenham acesso direto ao objeto de evento, você ainda pode acessá-lo por meio do parâmetro da função e utilizar suas propriedades para realizar ações específicas com base no evento ocorrido.
15. **Eu não entendi o por quê a arrow function não acessa diretamente um evento desencadeado por um listener de eventos, mas esses dois códigos das perguntas anteriores tem resultados iguais, poderia me explicar? **
const botao = document.querySelector('#meuBotao');
botao.addEventListener('click', function(event) {
console.log('Cliquei no botão!');
console.log('Tipo de evento:', event.type);
console.log('Elemento alvo:', event.target);
});
const botao = document.querySelector('#meuBotao');
botao.addEventListener('click', (event) => {
console.log('Cliquei no botão!');
console.log('Tipo de evento:', event.type);
console.log('Elemento alvo:', event.target);
});
Peço desculpas pela confusão anterior. Na verdade, tanto a função anônima quanto a arrow function podem acessar diretamente o objeto de evento em um listener de eventos. Ambos os códigos que você mencionou têm resultados iguais e funcionam corretamente. A diferença principal entre a função anônima e a arrow function está relacionada ao valor de "this" dentro da função. Nas funções anônimas, o valor de "this" é definido pelo contexto em que a função é chamada, enquanto nas arrow functions, o valor de "this" é herdado do escopo em que a função é definida. No caso dos listeners de eventos, o valor de "this" é definido automaticamente como o elemento alvo do evento. Portanto, tanto a função anônima quanto a arrow function podem acessar o objeto de evento através do parâmetro "event" e utilizar suas propriedades, como "type" e "target", para realizar ações específicas com base no evento ocorrido. Em resumo, tanto a função anônima quanto a arrow function podem ser utilizadas como listeners de eventos e acessar diretamente o objeto de evento através do parâmetro da função. A diferença principal entre elas está relacionada ao valor de "this" dentro da função, mas isso não afeta o acesso ao objeto de evento.
