为什么我不断获取.addEventListener不是一个函数？

Question

因此，我正在与JW Player一起工作，并且除我正在使用的一项功能外，其他所有功能都工作正常。当我运行代码时，出现控制台错误： 未捕获的TypeError：upTop.addEventListener不是一个函数 n

这是代码：

                var upTop = document.getElementsByClassName('playlist-item');

                upTop.addEventListener('click', function() {
                jwplayer.setup({autostart: true, floating: {dismissable: true}});
                       window.scrollTo(0, 0);
                });

这里是否缺少某种语法错误？

Answer 1

调用getElementsByClassName的工作方式不同于getElementById。多个元素可以具有相同的类名，因此返回的是一个数组。例如，如果您要返回第一个项目是因为您知道类中只有一个元素，那么

var upTop = document.getElementsByClassName('playlist-item')[0];

就足够了。否则，您可以遍历upTop中的所有项目并将事件侦听器添加到所有项目中。在纯JS中：

for (var i=0; i < upTop.length;i++) {
 upTop[i].addEventListener('click', function() {
    wplayer.setup({autostart: true, floating: {dismissable: true}});
    window.scrollTo(0, 0);
 });
}

Answer 2

UpTop是元素列表，而不是它本身的元素。

如果您尝试将其应用于一个元素，则可以使用  upTop[0].addEventListener

或者它的多个循环遍历它们并分别绑定它们

Answer 3

document.getElementsByClassName返回一个HTMLCollection，而HTMLCollection不具有属性addEventListener

仅用于第一个元素

var upTop = document.querySelector('.playlist-item');

使用for循环

如果要在所有元素上添加事件侦听器，请使用for循环。

var upTop = document.getElementsByClassName('playlist-item');
for(let i = 0;i<upTop.length;i++){
    upTop[i].addEventListener('click', function() {
       ...
    });
}

使用forEach

或者您可以将其转换为数组并使用forEach()

var upTop = [...document.getElementsByClassName('playlist-item')];
upTop.forEach(a => a.addEventListener(click,() => ...))

使用jQuery

$('.playlist-item').click(function(){
   ...
})

Answer 4

您最好重构代码以利用event delegation。本质上，该技术用于将事件处理委派给单个父容器-这样，我们就不必在要注册单击处理程序的每个元素上添加事件侦听器。

这是一个例子：

//A parent container for event delegation purposes
var containerEl = document.querySelector('#playlist-items-container');

//Add the event handler to the parent container and analyze the target when an element is clicked on
containerEl.addEventListener('click', e => {
  //Check if a //playlist-item was clicked
  if (e.target.className.indexOf('playlist-item') > -1) {
    console.log(`${e.target.textContent} was clicked`);
    //Do jwplayer.setup(...);
    //Do window.scrollTo(...);
  }
});

<div id="playlist-items-container">
  <div class="playlist-item">Playlist item 1</div>
  <div class="playlist-item">Playlist item 2</div>
  <div class="playlist-item">Playlist item 3</div>
  <div class="playlist-item">Playlist item 4</div>
</div>