[JSP] <JavaScript> 이벤트 등록

1. 윈도우 요소를 다 적재한 이후의 방식

	<script>
	window.onload = function(){
	
    	var box = document.getElementById('box');
        
		box.onclick = function(){
        
    		alert('이벤트 등록');	
            
  		}
			
	};
	</script>	
    
	<div id="box">클릭</div>

window.onload

• 요소를 다 적재하면

document.getElementById('box');

• id가 box인 요소를 받아온다.

box.onclick 

• box요소를 클릭하면

---

2. 함수를 먼저 제작화는 방식

• 요소를 클릭하면 할당된 기능이 작동하는 방식

<script>
	function addElem(){
    
    	var btn=document.getElementById('btn');
      
		function func(){
		  
			var div = document.createElement('div')
         
 			document.body.appendChild(div);	     
	         
 		}
      
 		btn.onclick = func;
   	
    }
   	
 	addEventListener('load', addElem);
   	
</script>

<button id="btn">버튼을 누르면 요소를 생성합니다.</button>

var div = document.createElement('div')

• div태그를 생성

document.body.appendChild(div);  

• 바디 태그안에 div 태그를 추가

btn.onclick = func;

• 클릭시, 기능 작동

addEventListener('load', addElem)

• 페이지 전체가 로드 되었을 때 addElem 함수 기동

---

링크 심기

<script>
   function addElem(){
      var btn=document.getElementById('btn');
      
      function func(){
         var div=document.createElement('div');
         
         var a=document.createElement('a');
         
         var txt=document.createTextNode('링크');
         
         a.appendChild(txt);
         
         a.setAttribute('href','https://www.naver.com/');
         
         div.appendChild(a);      
         
         document.body.appendChild(div);
      }
      
      btn.onclick = func;
   }
   addEventListener('load',addElem);
</script>

<button id="btn">버튼을 누르면 요소를 생성합니다.</button>

var div=document.createElement('div');

• div태그를 생성

var a=document.createElement('a');

• a태그를 생성

 var txt=document.createTextNode('링크');

• 텍스트 노드 생성

a.appendChild(txt);

• a태그에 텍스트 노드 추가

a.setAttribute('href','https://www.naver.com/');

• a태그에 href속성을 추가

div.appendChild(a); 

• div태그 사이에 a 태그를 추가

document.body.appendChild(div);

• body태그에 div태그를 추가