前言
在线练习js代码时，给一系列元素绑定点击事件，发现document.querySelector()不能直接添加点击事件，会报错（可能是因为jQuery用多了，限制了我的想象力...）
参考资料
MDN：querySelector
MDN：ParentNode
注意MDN：ParentNode中的描述：
ParentNode.querySelector()：返回以当前元素为根元素，匹配给定选择器的第一个元素Element
ParentNode.querySelectorAll()：返回一个NodeList，表示以当前元素为根元素的匹配给定选择器组的元素列表
这就是为啥querySelector()可以直接加点击事件，而querySelectorAll()不能直接加点击事件的原因了；
同时，ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。
正确的使用方式
借助Array的forEach方法进行遍历，对每个Element进行事件绑定
Array方法的使用
这里以forEach函数为例
- 正常方式
[1,2,3].forEach(function(item,index,input){
console.log(item);
});
- 其他函数借用
Array.prototype.forEach.call([1,2,3],function(item,index,input){
console.log(item);
});
或者
[].forEach.call([1,2,3],function(item,index,input){
console.log(item);
});
querySelectorAll的forEach遍历
[].forEach.call(color_btn,function(item,index,input){
item.addEventListener('click',()=>(alert("text")));
});
或者是
Array.prototype.forEach.call(color_btn,function(item,index,input){
item.addEventListener('click',function(){
alert("text");
});
});
