在前端开发中，单击事件处理是非常常见的操作。而在类（class）上添加单击事件侦听器，是一个比较新颖且实用的技术，可以方便地为一组元素添加交互性。本文将介绍如何在类上添加单击事件侦听器，并提供示例代码。
什么是类？
在面向对象编程中，类是相似对象的抽象模板。例如，我们可以创建一个“狗”类，该类包含所有狗共有的特征和行为，如品种、年龄、叫声等。然后，我们可以根据这个类创建多个具体的狗对象，如“金毛犬”、“斗牛犬”等。
在HTML和CSS中，类也是一种抽象的概念。我们可以使用类来标记多个元素，以便对它们进行统一的样式或脚本处理。
为什么要在类上添加单击事件侦听器？
在Web应用程序中，我们通常需要为页面上的某些元素添加交互性。例如，当用户单击一个按钮时，我们可能需要显示一个下拉菜单，或者打开一个模态框。
但是，如果我们的页面上有多个类似的按钮，每个按钮都需要添加相同的单击事件处理程序，这将变得非常繁琐。为了方便地对一组元素添加相同的事件处理程序，我们可以将它们标记为同一个类，并在这个类上添加单击事件侦听器。
如何在类上添加单击事件侦听器？
要在类上添加单击事件侦听器，我们首先需要获取所有这个类的元素。然后，我们可以使用forEach()方法遍历这个元素数组，并为每个元素添加单击事件侦听器。
以下是示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------
--------------------------------------------- ---------- -
--- ------- - ----------------------------------------
-------------------------------- -
-------------------------------- --------------- -
------------- ---------
---
---
---
---------
-------
---------- -
-------- -----
----------------- --------
------ ------
-------------- ----
---------------- -----
-
---------------- -
----------------- --------
-
--------
-------
------
------- ------------------------ ----------
------- ------------------------ ----------
------- ------------------------ ----------
-------
-------在这个示例中，我们首先使用querySelectorAll()方法获取所有具有“my-button”类的按钮。然后，我们使用forEach()方法为每个按钮添加一个单击事件侦听器。当用户单击任何一个按钮时，都会显示一个包含“Hello, world!”文本的警示框。
总结
在类上添加单击事件侦听器是一种方便而实用的技术，可以为一组元素添加交互性。我们可以使用querySelectorAll()方法获取所有具有相同类的元素，并使用forEach()方法为每个元素添加单击事件侦听器。这个技术可以大大简化我们的代码，并提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10904
