버튼에 이벤트 추가

1. 고전 이벤트 모델

<button id="btn">실행</button>

<script>
	var button = document.getElementById("btn");
    
    button.onclick = function() {
    	alert("고전 이벤트 모델 방식으로 실행한 alert");
    }
</script>

 

 

 

2. 인라인 이벤트 모델

<button onclick="inlineFunction()">실행</button>

<script>
    function inlineFunction{
    	alert("인라인 이벤트 모델 방식으로 실행한 alert");
    }
</script>

 

 

 

3. 표준 이벤트 모델

<button id="btn">실행</button>

<script>
	document.getElementById("btn").addEventListener("click", clickFunction);

    function clickFunction{
    	alert("표준 이벤트 모델 방식으로 실행한 alert");
    }
</script>

대상 button을 가져와 addEventListener("이벤트 종류", 함수)로 함수를 넣어준다.

 

표준 이벤트 모델이 가장 객체지향적이고 유지보수에 편할 듯.