JS 进阶(7) DOM事件：主流浏览器dom2级事件、IE6~IE8dom2级事件、事件冒泡、事件委托、事件类型

什么是事件？

事件是可以被js侦测到的行为，当用户与web页面进行交互时，解释器就会创建响应的event对象来描述事件。

常见的事件有哪些？

• 点击页面上某个元素
• 鼠标经过特定的元素
• 按下键盘上某个按键
• 滚动窗口或改变窗口大小
• 页面元素加载完成或失败

一、主流浏览器 dom2级事件定义（包括IE9+）

1.1 事件定义三种方式

这里重点讲dom2级事件

1. 在html元素中定义事件

<button onclick="alert('hello')">按钮</button>

缺点：html中写js代码。强耦合，不利于服用代码，违反了内容与行为相分离的原则。

2. dom0级事件
   事件对象的属性添加绑定事件。

	document.getElementById('btn').onclick = function(){
   }
	
	document.body.onload = init;
	function init(){
    ....}

优点：兼容所有浏览器包括IE6~IE8，可以进行事件模拟.
缺点：同一个事件只能绑定一个监听函数

3. dom2级事件：addEventListener

btn.addEventListener('click',function(){
   },false);	主流浏览器
btn.attachEvent('onclick',function(){
   })				IE

优点：高级事件处理方法，一个事件可以绑定多个函数。
缺点：浏览器的兼容性。

---

1.2 dom2级事件

dom2级事件的优点：

• 允许事件对象绑定多个同种事件
• 事件捕获
• 事件冒泡

1.2.1 绑定事件addEventListener()

功能：添加的事件函数
语法：ele.addEventListener(event, functiion, useCapture)
参数说明：

• event 必选。字符串，要移除的事件名称。
• function 必选，指定要移除的函数。
• useCapture 可选，布尔值，默认为false（事件冒泡），true（事件捕获）

addEventListener()可以绑定多个同类型事件。

var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
   alert(1)},false);
btn.addEventListener('click',function(){
   alert(2)},false);

1.2.2 移除事件removeEventListener()

功能：移除addEventListener()方法添加的事件函数
语法：ele.removeEventListener(event, functiion, useCapture)
参数说明：

• event 必选。字符串，要移除的事件名称。
• function 必选，指定要移除的函数。
• useCapture 可选，布尔值，默认为false，指定移除事件句柄的阶段。

移除事件的坑
如果想要用removeEventListener()进行事件解绑，那就在绑定事件的时候不能使用匿名函数。

var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
   alert(1)},false);
btn.removeEventListener('click',function(){
   alert(1)},false);

上面的解绑事件看似解绑的是同一个除了函数，但是这两个匿名函数不是同一个，只有使用function和var声明的函数，才能拿到函数体的地址，指向同一个函数。

var fn = function(){
   alert(1)};
btn.addEventListener('click',fn,false);
btn.removeEventListener('click',fn,false);

---

二、IE6~IE8 dom2级事件定义

这里的方法只有 IE6~IE8支持。
只有事件冒泡，没有事件捕获。

2.1 添加事件attachEvent()

属于dom2级事件，也是可以绑定多个事件处理函数。

语法

ele.attachEvent(event,function);

参数说明：

• event 必须，指定事件名，必须添加on前缀。
• function 必须，指定事件触发时的执行函数。
• 没有第三个参数，因为ie6~ie8不支持事件捕获。

2.2 移除事件detachEvent()

移除attachEvent()方法添加的监听函数。

语法

ele.detachEvent(event, function);

参数说明：

• event 必须，指定事件名，必须添加on前缀。
• function 必须，指定事件触发时的执行函数。
• 没有第三个参数，因为ie6~ie8不支持事件捕获。

2.3 IE8中this的指向问题

在IE8及更早版本浏览器 中dom2级事件中的this指向的不是当前对象，而是window

	var btn = document.getElementById('btn');
	var test = function(){
   
		alert(this === window);		true
	}
	
	EventUtil.