JS 丨 기초 고찰 03 丨 DOM 사건 류

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. 감청 사건 포착 및 거품 발생

    

	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)
	}