Javascript 使用forEach添加和删除EventListener_Javascript

Javascript 使用forEach添加和删除EventListener

javascript

Javascript 使用forEach添加和删除EventListener,javascript,Javascript,为什么“div[1]”有效，为什么“div.nextElementSibling”无效，因为在console.log中，当forEach方法处理第一个div时，它们的显示方式相同 <--HTML--> <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script defer src="main.js"></s

为什么“div[1]”有效，为什么“div.nextElementSibling”无效，因为在console.log中，当forEach方法处理第一个div时，它们的显示方式相同

<--HTML-->

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script defer src="main.js"></script>
</head>
<body>
    <div class='div'>first</div>
    <div class='div'>second</div>
</body>
</html>

<--JS-->

const divs = document.querySelectorAll('.div')

divs.forEach((div, id) => {

    const clg = () => { 

        console.log(id)

        //it works
        divs[1].removeEventListener('click', clg)

        //it doesn't
        div.nextElementSibling.removeEventListener('click', clg)

    }

    div.addEventListener('click', clg)

    //this DOM's elements for div1 are the same
    console.log(divs[1],div.nextElementSibling)
})


文件
第一
第二
const divs=document.queryselectoral（'.div'）
divs.forEach（（div，id）=>{
常数clg=（）=>{
控制台日志（id）
//它起作用了
divs[1]。removeEventListener（'click'，clg）
//没有
div.nextElementSibling.removeEventListener（'click'，clg）
}
div.addEventListener（'click'，clg）
//div1的DOM元素是相同的
console.log（divs[1]，div.nextElementSibling）
})

这是因为，无论forEach循环中运行哪个循环，divs[1]都将始终显示固定值

因为div包含2个元素

<div class='div'>first</div>
<div class='div'>second</div>

首先
第二

因此，对于forEach循环的每个周期，div值都会发生变化，divs[1]是一个固定值

<div class='div'>second</div>

秒

现在，控制台将记录日志

// Cycle 0
// Console.log(divs[1])
<div class='div'>second</div>
// Console.log(div.nextElementSibling)
<div class='div'>second</div>

// Cycle 1
// Console.log(divs[1])
<div class='div'>second</div>
// Console.log(div.nextElementSibling)
null

//循环0
//Console.log（divs[1]）
第二
//Console.log（div.nextElementSibling）
第二
//周期1
//Console.log（divs[1]）
第二
//Console.log（div.nextElementSibling）
无效的

它可能适用于

forEach

循环的第一次迭代。但是在您的示例中，

forEach

将迭代两次，每个div迭代一次。在第二个循环中，

div

是“second”。在该循环中，

div.nextElementSibling

将为空，因为在第二个div之后没有其他元素。