[element].Javascript 中的 AddEventListener？

Question

我对编码非常陌生。下面是一段我很难理解的JS代码：

var btnContainer = document.getElementbyId(“linkcontainer”);
var btns = btnContainer.getElementsbyClassName(“btn”);
for (var i = 0; i < btns.length; i++){
btns.addEventListener(“click”, function(){
var current = document.getElementsbyClassName(“active”);
current[0].className = current[0].className.replace(‘active’, “”);
 this.className += ‘active’;
});}

[i]

有何不同

btns[i].AddEventListener??

它到底是什么？如果括号之间没有“i”怎么办？也是当前[0]。这可能是一个愚蠢的问题，但请帮助我理解。

Answer 1

首先，没有愚蠢的问题，只有愚蠢的答案。

在代码中，您会获得存储在名为“btns”的数组中的 DOM 元素列表，然后使用循环对其进行迭代。

因此

btns[i]

允许您检索

i

位置的元素（需要注意的是，在 Javascript 中数组从 0 开始）。

示例：

var fruits = ['Apple', 'Banana'];

console.log(fruits[0])
console.log(fruits[1])

因此，如果您不使用

[i]

，您将迭代数组本身，而不是存储在其中的元素。

Answer 2

正如方法名称

getElementsByClassName

所暗示的那样，它会查询

DOM

并返回一个类似数组的对象，其中包含具有指定类名的多个元素。

btns

- 将是一个包含一个或多个元素的数组。

要访问数组中的特定元素，可以使用当前迭代的索引来访问它。

btns[1]

- 允许您访问列表中的第二个元素。

addEventListener

- 用于将事件处理程序绑定到单个元素。您不能直接在对象数组上使用它。

// query the DOM for element with id - linkcontainer
var btnContainer = document.getElementbyId(“linkcontainer”);
// query the DOM for elements with className - btn
// This can return multiple elements, so btns will be 
// as array like object of elements
var btns = btnContainer.getElementsByClassName(“btn”);

// iterate over the array that was just queried for
for (var i = 0; i < btns.length; i++) {

  // bind a click event for each element in the array
  btns[i].addEventListener(“click”, function() {
    // query the dom for elements with className - active
    var current = document.getElementsByClassName(“active”);

    // access the first element and replace the active class 
    current[0].className = current[0].className.replace(‘active’, “”);

    // add the active class to the element that was clicked
    this.className += ‘active’;
  });
}

在我看来，您必须删除所有元素的

active

类，而不仅仅是第一个实体。改进此代码的一个稍微更好的方法是

var btnContainer = document.getElementbyId(“linkcontainer”);
var btns = btnContainer.getElementsByClassName(“btn”);

btns.forEach(function(btn) {
  btn.addEventListener(“click”, function() {
    // query the dom for elements with className - active
    var current = document.getElementsByClassName(“active”);

    current.forEach(function(elem) {
      elem.classList.remove('active');
    });

    this.classList.add('active');
  });
});

Answer 3

正如其他发帖者所提到的，您的代码

var btns = btnContainer.getElementsbyClassName(“btn”);

应该返回一个DOM元素数组，因此在for循环中，当i从0到

btns[i]

时，

btns

将检索

btns.length

的索引i处的特定元素。删除 i 将在每次迭代时检索整个数组。

对于你的第二个问题：

current

与

btns

完全相同，是一个DOM元素数组，因此

current[0]

将检索该数组中的第一个元素。