事件绑定on和addEventListener的区别

今天在敲代码的时候遇到的问题，刚好有空。就记了下来。

首先，我们应该知道，在绑定事件的时候有三种方法。

拿最简单的click举例说明下。第一种，直接在html中，使用onclick；第二种，在js代码中使用元素.click来调用；第三种就是事件元素.addEventListener()来调用。

那么他们的区别在哪呢？

<div class="test">
这是一段测试使用代码
</div>

在js代码中用on绑定，如下

 window.onload = function () {
        var box = document.getElementsByClassName('test')[0];

        box.onclick = function () {
            console.log('点击事件1');
        };
        box.onclick = function () {
            console.log('点击事件2');
        };

        //点击事件2
    }

很清楚在控制台可以看到输出的只有 “点击事件2”；

window.onload = function () {
        var box = document.getElementsByClassName('test')[0];

        box.addEventListener('click',function () {
            console.log('点击事件1');
        });
        box.addEventListener('click',function () {
            console.log('点击事件2');
        });
        //点击事件1 
        //点击事件2
    }

那么显而易见，使用on绑定的事件会覆盖，而addEventListener则可以为一个元素绑定多个事件，且保证全都会被执行。

关于addEventListener还有第三个参数，如下