在前端开发中，我们经常需要将多个事件绑定到同一个侦听器上。使用jQuery可以轻松地实现这一点，但是如果你不想引入额外的库，该怎么办呢？本文将介绍如何使用原生JavaScript将多个事件绑定到同一个侦听器上。
为什么需要将多个事件绑定到侦听器上？
在某些情况下，我们需要对同一个DOM元素同时监听多个事件。例如，我们可能需要在用户单击、触摸或按下键盘时执行相同的操作。此时，将多个事件绑定到同一个侦听器上可以帮助我们避免重复代码和逻辑。
使用addEventListener()方法绑定多个事件
我们可以使用addEventListener()方法将多个事件绑定到同一个侦听器上。该方法可以接受三个参数：要监听的事件类型、事件处理函数、以及一个可选的布尔值，指示事件是否在捕获或冒泡阶段被处理。
以下是一个示例，将click、touchstart和keydown事件绑定到同一个侦听器上：
--- -- - -------------------------------------- -------- ----------------------------------- - -- ------- - ---------------------------- ------------------------------ --------------------------------- ------------------------------ ------------------------------ ------------------------------
在上面的示例中，我们定义了一个名为handleClickOrTouchOrKeyPress()的函数，该函数将处理三种不同类型的事件。然后，我们使用addEventListener()方法将每个事件类型绑定到该函数上。
支持IE8及以下版本
如果你需要支持IE8及以下版本，那么使用addEventListener()方法就行不通了。相反，你可以使用attachEvent()方法来绑定多个事件。
以下是一个示例，将click、touchstart和keydown事件绑定到同一个侦听器上：
--- -- - -------------------------------------- -------- ------------------------------ - --- ----- - ------------- -- ------- - ------------------------- ------------------------------ ------------------------------ ------------------------------ --------------------------- ------------------------------
需要注意的是，在使用attachEvent()方法时，事件名称前需要添加"on"前缀。
结论
将多个事件绑定到同一个侦听器上是前端开发中常见的操作。本文介绍了如何使用原生JavaScript实现这一点，并提供了兼容IE8及以下版本的代码示例。希望本文能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11677