javascript高级程序设计笔记-第十三章（事件）

一、事件流

事件流包括三个阶段：事件捕获阶段、处于目标阶段、时间冒泡阶段。

如图：捕获阶段是逐级向下，由不具体到具体节点；冒泡阶段是逐级向上传播到不具体的节点

二、事件处理程序

1、HTML事件处理程序

通过使用一个与相应事件处理程序同名的HTML特性来指定

<input type="button" value="click" onclick="alert('hi')">

2、DOM0级事件处理程序

将一个函数赋值给一个事件处理程序属性（每个元素都有自己的事件处理程序属性）

var btn = document.getElementById("myBtn");
btn.onclick = function() {
	alert("hi");
};

使用DOM0级方法指定的事件处理程序是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行，即this引用当前的元素

var btn = document.getElementById("myBtn");
btn.onclick = function() {
	alert(this.id);
};

删除事件处理程序

btn.onclick = null;

3、DOM2级事件处理程序

addEventListener()和removeEventListener()用于处理指定和删除事件处理程序的操作。接收3个参数：事件名、事件处理函数、布尔值。如果布尔值是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

var btn = document.getElementById('myBtn');
btn.addEventListener("click", function() {
	alert(this.id);
}, false);
//事件处理程序是在元素的作用域中运行，即this引用当前的元素

通过addEventListener()添加的事件处理程序只能用removeEventListener()移除；移除时传入的参数与添加处理程序时使用的参数相同。（添加的匿名函数无法移除）

var btn = document.getElementById('myBtn');
btn.addEventListener("click", function() {
	alert(this.id);
}, false);
btn.removeEventListener("click", function() {
	alert(this.id);
}, false);		//无效

//将匿名函数赋值给变量
var btn = document.getElementById('myBtn');
var handler = function() {
	alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);	//有效

4、IE事件处理程序（IE8及更早版本）

attachEvent()和detachEvent()，接收2个参数：事件名、事件处理函数

除了事件处理程序的作用域不一样外，其他类似。IE事件处理程序在全局作用域中运行

var btn = document.getElementById('myBtn');
var handler = function() {
	alert(this === window);
};
btn.attachEvent("onclick", handler);	//true
btn.detachEvent("onclick", handler);

5、跨浏览器的事件处理程序

var EventUtil = {
	addHandler: function(element, type, handler) {
		if (element.addEventListener) {
			element.addEventListener(type, handler, false);
		} else if (element.attachEvent) {
			element.attachEvent("on" + type, handler);
		} else {
			element["on" + type] = handler;
		}
	},
	removeHandler: function(element, type, handler) {
		if (element.removeEventListener) {
			element.removeEventListener(type, handler, false);
		} else if (element.detachEvent) {
			element.detachEvent("on" + type, handler);
		} else {
			element["on" + type] = null;
		}
	}
};

//使用EventUtil对象
var btn = document.getElementById('myBtn');
var handler = function() {
	alert("hi");
};
EventUtil.addHandler(btn, "click", handler);

三、事件对象

1、DOM中的事件对象

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标

如果将事件处理程序指定给了目标元素，则this、currentTarget、target包含的值相同

var btn = document.getElementById('myBtn');
btn.onclick = function(event) {
	alert(this === event.currentTarget);	//true
	alert(this === event.target);			//true
};

如果事件处理程序存在于父节点中，单击当前元素时

var btn = document.getElementById('myBtn');
document.body.onclick = function(event) {
	alert(document.body === event.currentTarget);	//true
	alert(document.body === this);					//true
	alert(btn = event.target);						//true
};

使用type属性，通过一个函数处理多个事件

var btn = document.getElementById('myBtn');
var handler = function(event) {
	switch(event.type) {
		case "click":
			alert("hi");
			break;
		case "mouseover":
			event.target.style.backgroundColor = "red";
			break;
		case "mouseout":
			event.target.style.backgroundColor = "";
			break;
	}
};

btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

preventDefault()方法，阻止特定事件的默认行为（只有在cancelable属性为true时才能使用）

var link = document.getElementById('myLink');
link.onclick = function(event) {
	event.preventDefault();
};

stopPropagation()方法，取消事件的进一步捕获和冒泡（只有在cancelable属性为true时才能使用）

var btn = document.getElementById('myBtn');
btn.onclick = function(event) {
	alert("hi");
	event.stopPropagation();
};
document.body.onclick = function(event) {
	alert("hi again");
};
//如果不使用stopPropagation()，单击按钮时，就会先后出现两次警告框

2、IE中的事件对象

在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。即window.event

var btn = document.getElementById('myBtn');
btn.onclick = function(event) {
	var event = window.event;
	alert(event.type);
};
//通过window.event取得event对象

使用attachEvent()添加事件处理程序时，event对象作为参数被传入事件处理函数

var btn = document.getElementById('myBtn');
btn.attachEvent("onclick", function(event) {
	alert(event.type);
});

srcElement属性，表示事件的目标（与DOM中的target属性相同）

var btn = document.getElementById('myBtn');
btn.onclick = function() {
	alert(window.event.srcElement === this);	//true
};
//都指向btn元素
btn.attachEvent("onclick", function(event) {
	alert(event.srcElement === this);			//false
});
//event.srcElement指向btn元素，this指向全局作用域window

returnValue属性，默认为true，设置为false时可以取消事件的默认行为（与DOM中的preventDefault()方法相同）

var link = document.getElementById('myLink');
link.onclick = function() {
	window.event.returnValue = false;
};

cancelBubble属性，与DOM中的stopPropagation()方法类似，默认为false，设置为true时可以取消事件的冒泡

var btn = document.getElementById('myBtn');
btn.onclick = function() {
	alert("hi");
	window.event.cancelBubble = true;
};
document.body.onclick = function() {
	alert("hi again");
};
//设置为true，单击按钮，只显示一个警告框

3、跨浏览器的事件对象

var EventUtil = {
	getEvent: function(event) {					//取得event对象
		return event ? event : window.event;
	},
	getTarget: function(event) {				//取得事件的目标
		return event.target || event.srcElement;
	},
	preventDefault: function(event) {			//阻止事件的默认行为
		if (event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}
	},
	stopPropagation: function(event) {			//阻止事件流
		if (event.stopPropagation) {
			event.stopPropagation();
		} else {
			event.cancelBubble = true;
		}
	}
};

四、事件委托

只指定一个事件处理程序，就可以管理某一类型的所有事件

<ul id="myLinks">
	<li id="dosomething">do something</li>
	<li id="gosomewhere">go somewhere</li>
	<li id="sayhi">say hi</li>
</ul>

传统：

var item1 = document.getElementById('dosomething');
var item2 = document.getElementById('gosomewhere');
var item3 = document.getElementById('sayhi');

EventUtil.addHandler(item1, "click", function(event) {
	document.title = "other title";
});
EventUtil.addHandler(item2, "click", function(event) {
	location.href = "http://baidu.com";
});
EventUtil.addHandler(item3, "click", function(event) {
	alert("hi");
});

事件委托：

var list = document.getElementById('myLinks');
EventUtil.addHandler(list, "click", function(event) {
	event = EventUtil.getEvent(event);
	var target = EventUtil.getTarget(event);
	switch(target.id) {
		case "dosomething":
			document.title = "other title";
			break;
		case "gosomewhere":
			location.href = "http://baidu.com";
			break;
		case "sayhi":
			alert("hi");
			break;
	}
});