这段代码为什么会报错

Question

$(document).ready(function() {
var btn = document.querySelectorAll(".active-menu-btn");
var div = document.querySelector('#apDiv1');

btn.addEventListener('click', function(ev) {
  event.stopPropagation();
 
  if (div.className.indexOf('hide') >= 0){
      div.classList.remove('hide');
      return;
      };   
  div.classList.add('hide');
}, false);

报错代码为 btn.addEventListener is not a function

Answer 1

var btn = document.querySelectorAll(".active-menu-btn");这个是类数组，肯定没有 addEventListener 事件，如果是多个btn的话，转换成数组，循环调用 addEventListener，如果是一个的话，直接 var btn = document.querySelector(".active-menu-btn");

Answer 2

querySelectorAll返回的是一个类数组，querySelector返回单个元素

可以这样写

var btns = document.querySelectorAll(".active-menu-btn");
$.each(btns, function(){     
    this.addEventListener...    
 });

Answer 3

谢邀。

楼上讲的不够精确。querySelectorAll获取的不是数组，而是类数组的NodeList的实例对象。

https://developer.mozilla.org...

这么写

var btns = document.querySelectorAll(".active-menu-btn");

Array.prototype.forEach.call(btns, function(btn){
  btn.addEventListener('click', function(ev) {
    event.stopPropagation();
    if (div.className.indexOf('hide') >= 0) return div.classList.remove('hide');
    div.classList.add('hide');
  }, false);
});

顺带提一句，你都用jq了，其实可以不用这样用原生的js写

Answer 4

Btn 换成btn[0
]

Answer 5

上面的说得很对，btn是querySelectorAll获取的，其实是一个数组，也就是说你需要循环分别为每个btn[i]绑定监听事件。另，补充一点，js的事件绑定方法中，ie只支持attachEvent,而FF和Chrome只支持addEventListener，所以，为了防止某些还在用IE的屌丝，你还得处理一下兼容问题

Answer 6

var btn = document.querySelectorAll(".active-menu-btn");

此处btn是一个类数组 所以不可以直接绑定监听事件
此处你可以循环btn 然后对btn[i]绑定监听事件
同时 你这边用的是jQuery
所以 直接用on事件代替监听事件 更为方便