原生JavaScript绑定事件监听器的几种方法

读《JavaScript高级程序设计》笔记，删除线的地方是对原书的校正，因为书比较旧，具体方法使用时应当再查阅一下文档。

绑定事件监听器（事件处理程序）的方法有4种，第4种仅用于 IE8 及更低版本。

1.HTML事件处理程序（行内绑定）

具体实现：通过为HTML元素设置相应特性。特性名为事件监听器的名字（on + 事件名），特性值为能够执行的 js 代码。浏览器内部会为我们绑定的事件处理程序创建一个封装着元素属性值的函数；

<div onclick="alert('触发了点击事件')"> 点我试试 </div>

这种方式添加的事件处理程序会在事件冒泡阶段被处理；

事件对象（event）访问方法：是浏览器内部创建的这个封装函数中的一个局部变量，可以直接在事件处理程序中访问 event 变量；

<div onclick="console.log('我是事件对象', event);"> 点我试试 </div>

事件处理程序内部的 this：在这个函数内部，this 等于事件的目标元素 绑定当前事件处理程序的元素；

<div 
	onclick="
		alert('事件冒泡到div容器');
		console.log('事件目标元素是button：',event.target===document.getElementsByTagName('button')[0]);	//true
		console.log('this 是目标元素：',this===event.target);	//false
		console.log('当前事件处理程序绑定的元素是div：',event.currentTarget === document.getElementsByTagName('div')[0]);	//true
		console.log('this 是绑定当前事件处理程序的元素：',this===event.curre