事件处理程序

1、HTML事件处理程序

指的是，事件直接加在HTML结构里：

<input type="button" value="按钮" onclick="alert('hello')">
<input type="button" value="按钮" onclick="showMes()">

<script>
function showMes(){
    alert('hello');
 }
</script>

以上两个例子都是函数调用写在HTML结构里的。最大的缺点是，HTML和js代码是紧密耦合在一起的，也就是说，当我修改js的时候，可能也需要修改HTML里面的内容：例如，我修改showMes()的函数名为showMessage()，那相应的，HTML中的input元素也要修改调用的函数名。

2、DOM 0级事件处理程序（用的最多的一种）

指的是，把一个函数赋值给一个事件处理程序的属性，特点是：在大部分的浏览器都支持，用的较多，而且简单，有跨浏览器的优势，除此之外，还可以给一个元素添加多个事件。

<input type="button" value="按钮" id="btn" onclick="alert('hello')">
<input type="button" value="按钮" onclick="showMes()">

<script>
function showMes(){
    alert('hello');
 }
var btn = document.getElementById("btn");
btn.onclick = function(){
    alert("btn hello");
}
</script>

在这里，事件其实是元素btn的一个属性（给按钮添加一个属性，而这个属性触发了一个函数）

3、DOM 2级事件处理程序

此方法定义了两个方法，用于处理和删除事件的操作：addEventListener()和removeEventListener()，接受3个参数：要处理的事件名，作为事件处理程序的函数，false/true （true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序，一般设置为false，因为添加到冒泡阶段可以最大限度的兼容各种浏览器）

var btns = document.getElementById("btns");
//添加事件监听器
btns.addEventListener('click', showMes, false);
//删除事件
btns.removeEventListener('click', showMes, false);

优点：可以给一个元素添加多个事件。

4、IE事件处理程序（主要是IE和opera）

attachEvent()：添加事件； detachEvent()：删除事件； 都接受两个参数：事件处理程序的名称，事件处理程序的函数（IE8以及更早的版本，默认是冒泡，所以不需要布尔值）

//添加事件监听器
btns.attachEvent('onclick', showMes);
//删除事件
btns.detachEvent('onclick', showMes);

转载于:https://my.oschina.net/summeryh/blog/681266