Javascript 将事件处理程序附加到整个字母表或逐个附加到事件处理程序 我通过map方法迭代了水果数组，并在浏览器中显示了这些元素。 但每次点击水果时，我都需要分别用水果名称a显示相应的警报 但现在在我的点击中，我只看到a，当我点击字母b时，它应该是b 是否需要为每个字母表附加事件处理程序 你能告诉我解决这个问题的最佳方法吗 下面提供我的代码片段和沙盒

function sampleFunction（）{
设水果=[“a”、“b”、“c”、“d”、“e”、“f”、“g”]；
var fruitsElement=document.getElementById（'fruits1'）；
图（项目=>{
console.log（“项-->”，项）；
fruitsElement.innerHTML+=项
退货项目；
});
/*var fruitsElement=document.getElementById（'fruits1'）；
对于（变量i=0；i

正文{
背景色：#1d2126；
颜色：白色；
}

你好，世界
测试

为每个水果名称创建单独的跨距<代码>结果单击（）然后可以检查您单击的跨度并获取其文本内容

function sampleFunction（）{
设水果=[“a”、“b”、“c”、“d”、“e”、“f”、“g”]；
var fruitsElement=document.getElementById（'fruits1'）；
水果。forEach（项目=>{
console.log（“项-->”，项）；
fruitsElement.innerHTML+=`${item}`；
});
}
函数果键（e）{
e、 stopPropagation（）；//防止从到冒泡
让fruit=e.target.innerText；
警惕（“我是水果”+水果）；
}

正文{
背景色：#1d2126；
颜色：白色；
}

你好，世界
测试

嘿，你能告诉我为什么我们要使用

.stopPropagation（）这将帮助我更好地理解代码。我们将事件侦听器附加到
，但我们只想在它第一次在
上启动时运行它。这阻止了它继续冒泡。试着把它拿出来看看会发生什么。