DOM事件类

基本概念：

DOM事件的级别

DOM0   element.onclick = function(){};

DOM2   element.addEventListener('click',function(){},false);

DOM3   element.addEventListener('keyup',function(){},false);

DOM事件模型

捕获：从上到下

冒泡：从当前元素到上

DOM事件流

一个完整的事件流分为三个阶段

第一阶段：捕获

第二阶段：目标阶段

第三阶段：冒泡(目标元素到window对象)

描述DOM事件捕获的具体流程

从上到下，第一个接收到的对象是window->document->html->body->目标元素

如何用js获取html结点：document.documentElement

Event对象的常见应用

     1.对事件原理的掌握，捕获冒泡的流程

     2.如何注册事件，监听用户交互行为

event.preventDefault();阻止默认行为

event.stopPropagatioon();阻止冒泡

event.stopImmediatePropagation();一个元素有两个执行事件，事件响应优先级问题可以用此设置

event.currentTarget；在事件冒泡阶段内的当前 DOM 元素，通常等于 this

event.target;返回哪个 DOM 元素触发了事件；for循环多个元素的点击事件可以用此处理

自定义事件

var eve = new Event('custome');
ev.addEventListener('custome',function(){
    console.log('custome');
});
ev.dispatchEvent(eve);

var eve = new CustomEvent('custome',obj);//与Event全部一样，唯一不同是CustomEvent可以传一个对象参数

 事件捕获的顺序：

<div id="button">
	<style type="text/css">
		#button{
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background: red;
			cursor: pointer;
		}
	</style>
	目标元素
</div>
<script type="text/javascript">
	var button = document.getElementById("button");
	window.addEventListener('click',function(){
		console.log("window capture");
	},true);
	document.addEventListener('click',function(){
		console.log("document capture");
	},true);
	document.documentElement.addEventListener('click',function(){
		console.log("html capture");
	},true);
	document.body.addEventListener('click',function(){
		console.log("body capture");
	},true);
	button.addEventListener('click',function(){
		console.log("button capture");
	},true);
</script>

事件冒泡的顺序

<div id="button">
	<style type="text/css">
		#button{
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background: red;
			cursor: pointer;
		}
	</style>
	目标元素
</div>
<script type="text/javascript">
	var button = document.getElementById("button");
	window.addEventListener('click',function(){
		console.log("window capture");
	},false);
	document.addEventListener('click',function(){
		console.log("document capture");
	},false);
	document.documentElement.addEventListener('click',function(){
		console.log("html capture");
	},false);
	document.body.addEventListener('click',function(){
		console.log("body capture");
	},false);
	button.addEventListener('click',function(){
		console.log("button capture");
	},false);
</script>

/*自定义事件*/
var eve = new Event('test');
button.addEventListener('test',function(){
	console.log('test dispatch');
});
setTimeout(function(){
	button.dispatchEvent(eve);
},5000);