바닐라 자바스크립트로 클릭 이벤트 구성하기

바닐라 자바스크립트로 만 클릭 이벤트 구현하기

<script type="text/javascript">
    <!--
        /* 'load' 와 'DOMContentLoaded' 중에 상화에 맞는 걸로 사용하면 된다. */
		window.addEventListener('load', function(){
			// load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.
                        document.getElementById('btnAdd').addEventListener('click', Click); // 이벤트 연결
			document.getElementById('btnAdd').addEventListener('click', Click1); // 또 하나의 이벤트 연결
			document.getElementById('btnAdd').removeEventListener('click', Click); // 연결할 이벤트 중 하나 제거
		})
		 
		window.addEventListener('DOMContentLoaded', function(){
			//DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없다.
			//DOMContentLoaded 이벤트는 IE9을 포함한 모든 브라우저에서 지원하고 있다.
			document.getElementById('btnAdd').addEventListener('click', Click); // 이벤트 연결
			document.getElementById('btnAdd').addEventListener('click', Click1); // 또 하나의 이벤트 연결
			document.getElementById('btnAdd').removeEventListener('click', Click); // 연결할 이벤트 중 하나 제거
		})
			
        
		function Click() {
		  alert('특별히 내가 눌렸다.');
		}
		function Click1() {
		  alert('제2의 이벤트 가 동작');
		}
    //-->
    </script>

 

addEventListener 로 이벤트 연결 하면 클릭 이벤트 외 다른것도 가능하니

세부 내용은 주석 참고 하세요