Javascript 向所有元素添加事件的正确方法是什么？

我试过了，但没用。每个文本元素都应该更改相应的图像。 在浏览器控制台中，

city\u name

显示为

html集合

让city_name=document.getElementsByClassName（“city_name”）；
让city_img=document.getElementsByClassName（“city_img”）；
for（设i=0；i

风和日丽
米兰
都灵
博洛尼亚
费伦泽
罗马
那不勒斯
巴勒莫

您可能需要在每个图像上添加一个“id”标记，然后在blur（）函数中引用它

顺便问一下，您是否考虑过使用更结构化的框架，如angular？整个页面可以这样写：

<div class="city" *ngFor="let city of cityList">
  <img id="{{city.id}}" src="{{city.img}}" class="city_img">
  <h1 class="city_name" (blur)="blurCity(city)">{{city.name}}</h1>
</div>

{{city.name}

您需要创建一个函数回调，因为现在它假设blur函数返回一个函数回调

将模糊（i）替换为函数（）{blur（i）；}

让city_name=document.getElementsByClassName（“city_name”）；
让city_img=document.getElementsByClassName（“city_img”）；
for（设i=0；i

风和日丽
米兰
都灵
博洛尼亚
费伦泽
罗马
那不勒斯
巴勒莫

您的代码中有几个问题：

getElementsByClass按预期返回集合而不是数组。您应该使用document.queryselectoral来获取元素数组

如前所述，您需要回调函数blur

与其传入参数，不如使用event.target以确保模糊正确的元素。使用previousElementSibling来定位图片

让city\u name=document.queryselectoral（“.city\u name”）；
让city\u img=document.queryselectoral（“.city\u img”）；
for（设i=0；i{blur（e）}）
}
函数模糊（e）{
e、 target.previousElementSibling.style.filter=“模糊（4px）”
}

如果将名称（

标记）放在图像之前（

），则只需使用css即可访问事件侦听器，而不需要任何javascript代码：

h1:hover + img{
  filter:blur(4px);
}

---

我假设您的js脚本位于HTML文件的

部分导入的

API.js

文件中。问题是脚本是在页面加载期间导入和执行的，因此它还看不到HTML元素（由

document.getElementsByClassName

函数调用）

您可以通过多种方式修复它：

在需要调用的HTML元素之后导入

API.js

script：

<div class="top_city">

    <div class="city">
        <img src="milano.jpg" class="city_img">
        <h1 class="city_name">Milano</h1>
    </div>
    ...

</div>

<script src="API.js"></script>

<!-- other code here -->

</body>

在加载页面期间执行代码。我认为这是最佳实践：

window.onload = function(){
    let city_name = document.querySelectorAll(".city_name");
    let city_img = document.querySelectorAll(".city_img");

    for (let i = 0; i < city_name.length; i++) {
        city_name[i].addEventListener("mouseover", (e)=>{blur(e)})   
    }

    function blur(e) {
        e.target.previousElementSibling.style.filter = "blur(4px)"  
    }
 }

window.onload=function（）{
让city\u name=document.queryselectoral（“.city\u name”）；
让city\u img=document.queryselectoral（“.city\u img”）；
for（设i=0；i{blur（e）}）
}
函数模糊（e）{
e、 target.previousElementSibling.style.filter=“模糊（4px）”
}
}

有关更多详细信息，请参见此

---

你需要

.addEventListener（“mouseover”，function（）{blur（i）；}）

+@ChrisG它不工作……是的它工作了：（悬停名称，图像变得模糊）@Frank ChrisG是对的。如果它对你不起作用，你就必须更详细地解释

<script src="API.js" async></script>

window.onload = function(){
    let city_name = document.querySelectorAll(".city_name");
    let city_img = document.querySelectorAll(".city_img");

    for (let i = 0; i < city_name.length; i++) {
        city_name[i].addEventListener("mouseover", (e)=>{blur(e)})   
    }

    function blur(e) {
        e.target.previousElementSibling.style.filter = "blur(4px)"  
    }
 }