不说太多虚的，这次要聊的，是JavaScript的三种事件绑定方式。

方法1：直接在HTML中指定，称为“内嵌”会不会更合适一点？

(1)直接在HTML的属性里写代码

示例代码：

<button onclick="alert('我我我')">点我！button>

界面部分(点击前)

界面部分(点击前)

当然啦，这种方法不仅仅onclick事件可以使用，onmouseover等方法一样适用，不过考虑到代码的可维护性，并不建议多用这种方式；

(2)在HTML中定义函数

示例代码：

<button onclick="fun()">点我button>    <script>        function fun() {            alert('123');        }script>

界面部分(点击前)：

界面部分(点击后)：

方法2：在JavaScript中绑定事件

示例代码：

<button id="btn">点我点我button>    <script>        var btn = document.querySelector('#btn');        btn.onclick = function() {            alert('我我我');        }

界面部分(点击前)：

界面部分(点击后)：

这种方法按照功能不同将代码分离，让代码的结构更加清晰，这一点相比第一种方法强了很多，但是坏处也是明显的，上代码！

<button id="btn">点我点我button>    <script>        var btn = document.querySelector('#btn');        btn.onclick = function() {            alert('我我我');        }        btn.onclick = function() {            alert('你你你');        }script>

界面部分(点击前)：

界面部分(点击后)：

啊？“我我我”呢？没错，当同一个点击事件有不止一个触发事件时，后面的触发事件就会覆盖前面的事件，这也是这种方法的最大缺点之一！

方法3：绑定事件监听函数 addEventListenr()

示例代码：

<button class="btn">点点点button>    <script>        var btn = document.querySelector('.btn');        btn.addEventListener('click', fn1);        btn.addEventListener('click', fn2);        function fn1() {            alert('我我我');        };        function fn2() {            alert('你你你');        }script>

界面部分(点击前)：

界面部分(点击后)：

如图所示，这种方式相比第二种方式，优点是触发不止一个事件时相当容易！