（一）定义
事件就是用户或者浏览器自身执行的某种行为，例如click，mouseover，都是事件的名字。而
响应某个事件的函数就叫做事件处理函数（或者事件监听器）。
（二）HTML事件处理函数
HTML
<body>
<form action=" ">
<input type="button" value="clickMe" onclick="alert(this.value)">
</form>
</body>
此时单击按钮就会弹出此input的value，这个操作是通过指定onclick特性并将一些JavaScript代码作为它的值来定义的。由于这个值是JavaScript，因此不能使用未转义的HTML语法字符。
① 特点
首先，这样会创建一个封装着元素属性值的函数。这个函数中有一个全局变量event，也就是事件对象，通过event变量，可以直接访问事件对象，不用自己定义它，也不用从函数的参数列表中读取。在这个函数内部，this值等于事件的目标元素
例如
<body>
<form action=" ">
<input type="button" value="clickMe" onclick="alert(event.type)">
</form>
</body>
还可以调用一个函数
<body>
<form action=" ">
<input type="button" value="clickMe" onclick="show()">
</form>
<script>
function show() {
alert(this);
}
</script>
</body>
注意，此时this指向window
② 缺点
- 如果用户在页面
解析show函数之前就单击了按钮，就会引发错误，为此很多HTML事件处理程序都会 被封装在一个try-catch块中，以便错误不会浮出水面。
<input type="button" value="clickMe" onclick="try{show();}catch(ex){}">
- 这样扩展事件处理程序的
作用域在不同浏览器中会导致不同的结果，不同的JavaScript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定成员时出错。 - HTML与JavaScript代码紧密耦合，想要改动就得改动两个地方，
不易于维护。
（三）DOM0级事件处理函数
① 使用
使用DOM0级方法指定的事件处理函数被认为是元素的方法。因此这时候的事件处理程序是在元素的作用域中运行：
<body>
<form action=" ">
<input type="button" value="clickMe">
</form>
<script>
var oInput = document.querySelector("input");
oInput.onclick = function(){
alert(this.value)
}
</script>
</body>
单击按钮显示的是元素的value，这个value是通过this.value进行获取的，不仅仅是value，在事件处理函数中能通过this访问元素的任何属性和方法，以这种方式添加的事件处理函数程序会在事件流的冒泡阶段被处理。
② 删除
<script>
var oInput = document.querySelector("input");
oInput.onclick = function(){
alert(this.value)；
oInput.onclick = null; //放在函数内部，点击一次后才删除
}
oInput.onclick = null; //放在函数外部，直接删除
</script>
③ 缺点
同一个事件只能绑定一次，后面的会覆盖前面的只能在冒泡阶段触发事件处理程序
（四）DOM2级事件处理函数
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener( ）和 removeEventListener（ ）。所有DOM节点都包含着两种方法，并且它们都接收三个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值（默认为false），最后这个布尔值是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
↓
如果你对冒泡，捕获不够了解，可以转到此文章
① 使用
<script>
var oInput = document.querySelector("input");
oInput.addEventListener("click",show);
function show(){
alert(this.value);
}
</script>
② 删除
oInput.removeEventListener("click",show)
③ 注意
通过addEventListener(）添加的事件处理程序只能用removeEventListener（）来移出；移出时传入的参数与添加处理程序时所使用的的参数相同。这也就意味着通过addEventListener（）添加的匿名函数无法移出
例如：
oInput.addEventListener("click",function(){
alert(this.value)
});//这样添加的事件处理函数无法被移出
结语：若文章有错误的地方，烦请在评论区指出。当然，我会不定时的重新编辑写过的文章，查错及优化，希望能将最好的文章展现给读者。
