如何实现JavaScript中事件绑定的多种常用绑定方式？

本文共计714个文字，预计阅读时间需要3分钟。

原文实例讲述了JS事件绑定的常用方式。分享给家长供参考，具体如下：

常用的事件绑定方式有三种：

1. 直接在DOM元素上绑定

2.使用on绑定

3.使用addEventListener、attachEvent绑定

本文实例讲述了JS事件绑定的常用方式。分享给大家供大家参考，具体如下：

常用的事件绑定的几种方式有三种：

• 直接在 dom 元素上进行绑定。
• 用 on 绑定。
• 用 addEventListener、attachEvent 绑定。

一、直接在 dom 元素上进行绑定

<input id="btn1" type="button" onclick="test();" />

二、用 on 绑定

兼容性：在IE，FF，Chrome，Safari，Mozilla，Opera下都适用。

// onclick绑定 document.body.onclick = () => { console.log(111) } // 解绑 document.body.onclick = null;

但是，同一个 dom 元素上，on 只能绑定一个同类型事件，后者会覆盖前者，不同类型的事件可以绑定多个。

三、用 addEventListener、attachEvent 绑定

同一个 dom 元素上，用 addEventListener、attachEvent 可以绑定多个同类型事件。