简介
在编写网页过程中，我们需要给页面上的元素添加事件（绑定事件）。在 原生JS 中，绑定事件有两种处理方式：DOM0级、DOM2级。DOM0级处理方式就是通过on绑定事件，DOM2级处理方式就是通过addEventListener()，但是DOM2级有兼容性问题，IE8及其以前的版本使用attachEvent()进行绑定事件。下面我们将详细介绍。
以下案例将采用上面这个HTML结构进行讲解，事件采用点击事件。在讲解三个绑定事件方法之前，有必要先了解什么是事件捕获和冒泡。
事件捕获和事件冒泡
事件捕获执行过程：
从最不具体的元素（最外面的那个盒子）开始向里面捕获，拿我们上面的案例讲它的顺序是：parent->child，说白了就是由外向内
事件冒泡执行过程：
从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child->parent，说白了就是由内向外
只有将事件捕获和事件冒泡弄清楚了之后才能进行详细讲解不同绑定事件的方法。
on详细说明
通过on的方式绑定事件是DOM0级处理方式。
eg：
//原生JS
//ele.on+type = fun;
//ele是指DOM元素；type是指事件类型；fun是要执行的函数
document.getElementById('parent').onclick = function () {
console.log('1')
}
document.getElementById('child').onclick = function () {
console.log('2')
}
通过on进行事件绑定默认事件冒泡。
注意：
document.getElementById('parent').onclick = function () {
console.log('1')
};
document.getElementById('parent').onclick = function () {
console.log('2')
};
这段代码的运行结果是打印2，这说名了对同一元素绑定同一事件会进行覆盖。
addEventListener()详细说明
通过addEventListener()进行事件绑定是DOM2级处理方式。这个方法只针对主流浏览器，我想非主流浏览器不需要我介绍了吧（IE8及其以前的版本）！
eg：
//原生JS
//ele.addEventListener(type , fun , [boolean])
//ele是指DOM元素；fun是指运行的函数；第三个参数可有可无，是指事件执行的顺序，如果是true，则按照事件捕获执行；如果是false，则是按照事件冒泡执行;第三个参数如果不写，则是默认false即事件冒泡
document.getElementById('parent').addEventListener('click' , function () {
console.log('1')
});
document.getElementById('child').addEventListener('click' , function () {
console.log('2')
});
通过这个方式对同一元素绑定同一事件是不会发生覆盖的情况，每个事件依次执行
document.getElementById('parent').addEventListener('click' , function () {
console.log('1')
});
document.getElementById('parent').addEventListener('click' , function () {
console.log('2')
});
执行结果是先打印1，在打印2。
attachEvent()详细说明
attachEvent()这个方法只针对那些让人头疼他的非主流浏览器（IE8及其以前的版本）。属于DOM2级处理方式。
//原生JS
//ele.atachEvent('on'+type , fun)
//ele是指DOM元素；
//第一个参数是个由on开头的字符串，指定绑定什么类型的事件;第二个参数是执行的函数
//该方法只有两个参数
document.getElementById('parent').attachEvent('onclick' , function () {
console.log('1')
});
document.getElementById('child').attachEvent('onclick' , function () {
console.log('2')
});
默认执行事件冒泡。
通过这个方式对同一元素绑定同一事件是不会发生覆盖的情况，每个事件倒序执行，即先绑定的事件后执行，后绑定的事件先执行
document.getElementById('parent').attachEvent('onclick' , function () {
console.log('1')
});
document.getElementById('parent').attachEvent('onclick' , function () {
console.log('2')
});
执行结果是先打印2，在打印1。
使用注意点
- DOM0级处理方式（on）没有兼容性问题，但是会发生覆盖的情况；
- DOM2级处理方式有兼容性问题，不会发生覆盖的情况；
- 注意addEventListener()和attachEvent()两个方法的第一个参数的区别：addEventListener()是一个不带on的字符串，就是个事件类型；attachEvent()是一个带on的字符串。