操作包含多词类名的元素时如何正确使用querySelector？

代码存在2处语法错误 #

• 第一处是querySelector的类选择器写法错误
  要选中同时拥有w和drum两个类的元素，多个类名需要连续拼接类选择器，正确写法是.w.drum；你原来写的.w drum的含义是「选中类名为w的元素下所有<drum>标签元素」，自然匹配不到对应按钮，会返回null，后续调用addEventListener会直接抛出类型错误。
• 第二处是addEventListener的第二个参数类型错误
  事件监听的第二个参数需要传入函数类型的值，不能直接传字符串。你可以传入匿名函数、箭头函数，或者单独定义的函数引用。

修复后的完整代码 #

<!-- HTML 部分 -->
<button class="w drum">w</button>

// JavaScript 部分
var wDrum = document.querySelector(".w.drum");
wDrum.addEventListener('click', function() {
  alert("click!")
});

// 也可以用箭头函数简写：
// wDrum.addEventListener('click', () => alert("click!"));

内容的提问来源于stack exchange，提问作者canistrophedon