JSFiddle - React, Tailwind, and code Playground

by Kim Ara

HTML

<button id="btn_1">0방식</button>
<button id="btn_2">2방식</button>

JavaScript

window.onload=function(){

// *이벤트 핸들러에 특정 함수를 설정
	// DOM Level 0 방식으로 이벤트 리스너를 등록
	var btn_1 = window.document.getElementById('btn_1');
  // 1-1. 일반 함수를 이벤트 리스너로 사용하는 경우
  btn_1.onclick=this.on_Click;
  // 1-2. 임의의 함수를 이벤트 리스너로 사용하는 경우
  btn_1.onmouseover=function(e){
  	alert('마우스 오버0');
  }
   
  
// *이벤트 모델 방식을 이용해 특정 함수를 이벤트 리스너로 등록
  // DOM Level 2방식으로 이벤트 리스너 등록하기
  var btn_2 = window.document.getElementById('btn_2');
  // 2-1. 일반 함수를 이벤트 리스너로 사용하는 경우
  btn_2.addEventListener('click', this.on_Click, false);
  // 2-2. 임의의 함수를 이벤트 리스너로 사용하는 경우
  btn_2.addEventListener('mouseover', function(e){
  	alert('마우스 오버2');
  }, false);  
  

}

function on_Click(e){
	alert('클릭');
}