JS学习五（事件处理程序—addEventListener）

简介

document.addEventListener() 方法用于向文档添加事件句柄。可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号

注： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 但是，对于这类浏览器版本可以使用 attachEvent() 方法来添加事件句柄（跨浏览器兼容问题可以查看"更多实例"）。

语法

   var btnDom=document.getElementById("btn1");//"btn1"为元素ID
    btnDom.addEventListener('click', function(e){}, useCapture)

参数

参数	描述
event	必需。描述事件名称的字符串。注意： 不要使用 “on” 前缀。可以使用 “click” 来取代 “onclick”。提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必需。描述了事件触发后执行的函数。当事件触发时，事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值：true - 事件句柄在捕获阶段执行。false（默认值）-事件句柄在冒泡阶段执行

addEventListener事件传递过程

捕获阶段： 从根节点开始顺序而下，检测每个节点是否注册了事件处理程序（从顶层元素向下）。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段）即：语法处的function函数里面的代码段。
目标阶段： 触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。
冒泡阶段： 从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。

实例

<div id="box1" style='background: #ABCDEF; width: 300px;height: 300px;'>
	<input type="button" value="test1" id='btn1' />
</div>
<script type="text/javascript">
	var btn1 = document.getElementById("btn1");
	var box1 = document.getElementById("box1");
	btn1.addEventListener('click', function(e) {
		alert('button clicked');
		//阻止冒泡
		var e = e || window.event;
		if(typeof e.cancelBubble == 'undefined') {
		    //在w3c中
			e.stopPropagation();
		} else {
		    //在微软的模型中
			e.cancelBubble = true;
		}
	}, false);
	box1.addEventListener('click', function() {
		alert('div clicked');
	}, false);
	document.body.addEventListener('click', function() {
		alert('body clicked');
	}, false);
	document.documentElement.addEventListener('click', function() {
		alert('html clicked');
	}, false);
	document.addEventListener('click', function() {
		alert('document clicked');
	}, false);

效果：
点击test1按钮：button clicked
点击id为box1的div分别显示：div clicked body clicked html clicked document clicked

addEventListener的event对象属性和方法

事件触发时，会将一个 Event 对象传递给事件处理程序，比如：
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
事件类型
DOM 事件类型是分为 UIEvent、UIEvent:KeyEvent、UIEvent:MouseEvent，不同的事件有不同的属性和方法。
对象的属性和方法列表

字段	描述
view	只读，对象，发生事件的 Window 对象。
type	只读，字符串。比如鼠标点击事件的类型：click。
eventPhase	只读，数字，事件流正经历的阶段。1－捕获，2－目标，3－冒泡。
target	只读，对象，派发事件的目标对象。比如鼠标是点击在哪个按钮上的。
currentTarget	只读，对象，当前正在调用监听器的对象，也就是当前 addEventListener 是绑定在哪个对象上的。
timeStamp	只读，数字，用毫秒表示事件发生时距计算机开机的时间。
cancelable	只读，布尔，处理事件的默认行为是否可以停止。主要针对一些系统事件，如果值为 true，则 event 的 preventDefault 方法可以使用，否则不可用。
preventDefault()	阻止浏览器的默认行为，比如在文本框中打字触发 keydown，如果 keydown 事件处理程序中调用了 preventDefault()，所打的字就不会跑到文本框中去，注意，此时不要弹出 alert 对话框，否则可能不起作用。IE 中在事件处理程序中用 return false 实现类似功能。
bubbles	只读，布尔，事件是否开启冒泡功能。
stopImmediatePropagation	这个东西在 JavaScript 中是个属性，而不是方法，布尔，但具体测试并未发现其用途，不知是不是 bug。
stopPropagation()	停止当前的事件流传播，但不会停止当前正在处理的对象。IE 中用 event.cancelBubble = true 实现类似功能。
cancelBubble	布尔，是否取消冒泡，不建议使用，用 stopPropagation() 代替。
preventBubble()	阻止冒泡，不建议使用，用 stopPropagation() 代替。
preventCapture()	阻止捕获，不建议使用，用 stopPropagation() 代替。
detail	只读，数字，提供时间的额外信息，对于 click 事件、mousedown 事件和 mouseup 事件，这个字段代表点击的次数。
isChar	只读，布尔，按下的按键值是否是字符，比如按下 Ctrl 键时，就返回 false。不过您在 Firefox 中测试时，该值总是 false，Firefox 官方已经说明这是一个 bug。
altKey	只读，布尔，是否按下了 Alt 键。
ctrlKey	只读，布尔，是否按下了 Ctrl 键。
shiftKey	只读，布尔，是否按下了 Shift 键。
metaKey	只读，布尔，是否按下了 Meta 键。

注:
charCode 只读，数字，字符（英文、数字、符号）的 Unicode 值。
只用于 keypress。

keyCode 只读，数字，键盘按键值。
用于 keypress 时：返回非字符按键值（除 Ctrl、Shift、Alt、Caps Lock、单行文本框中按向上键等）；
用于 keydown、keyup 时：返回任意键值。

button 只读，数字，鼠标按键值。
用于 click 时：0－左键。
用于 mousedown、mouseup 时：0－左键，1－中间键（滚轮），2－右键。

which 只读，数字，键盘按键值或鼠标按键值。
用于 keypress 时：等同于 charCode + 回退键 + 回车键；
用于 keydown、keyup 时：返回任意键值；
用于 click 时：1－左键，与 button 的值略有区别。
用于 mousedown、mouseup 时：1－左键，2－中间键（滚轮），3－右键，与 button 的值略有区别。