01. DOM事件類大綱

01. 基本概念: DOM事件的級別
	DOM0: element.onclick = function(){}
	DOM1: DOM1中沒有涉及DOM事件相關的內容
	DOM2: element.addEventListener('click', function(){}, false)
	DOM3: element.addEventListener('keyup', function(){}, false)


02. DOM事件模型; 03. DOM事件流
	事件模型: 冒泡和捕獲
	事件流: 捕獲 --> 目標階段 --> 冒泡


04. 描述DOM事件捕獲的具體流程
	window --> document --> html --> body --> ... --> 目標元素

05. event 物件的常見應用
	
	01. event.preventDefault(): 阻止預設事件
	02. event.stopPropagation: 阻止冒泡行為
	
	03. event.stopImmediatePropagation:
		場景: 一個元素繫結兩個點選事件
		功能: 在一個事件執行中阻止另一個事件
		
	04. event.currentTarget: 當前所繫結的事件
		事件代理 / 事件委託
	
	05. event.target: 當前被點選的元素
	
	
	
06. 自定義事件
	var eve = new Event('custome');
	// ev: DOM節點
	ev.addEventListener(
		'custome', 
		function(){
			console.log('custome')
		}
	);
	ev.dispatchEvent(eve)
 

02. 監聽事件捕獲與冒泡

<div id="ev">目標元素</div>
<script type="text/javascript">
	window.onload = function() {
		var ev = document.getElementById('ev');
		
		// DOM捕獲流程
		ev.addEventListener(
			'click', 
			function(){
				console.log('ev captrue')
			}, 
			true
		);
		
		window.addEventListener(
			'click', 
			function(){
				console.log('window captrue')
			}, 
			true
		);
		
		document.addEventListener(
			'click', 
			function(){
				console.log('document captrue')
			}, 
			true
		);
		
		document.documentElement.addEventListener(
			'click', 
			function(){
				console.log('docEle captrue')
			}, 
			true
		);
		
		document.body.addEventListener(
			'click', 
			function(){
				console.log('body captrue')
			}, 
			true
		);
		
		
		// 自定義事件
		var eve = new Event('newEv');
		ev.addEventListener(
			'newEv', 
			function(){
				console.log('newEv')
			}
		)
		setTimeout(
			function(){
				ev.dispatchEvent(eve)// 放在延時器中使用
			},
		1000)
	}
</script>