[JavaScript] 이벤트 처리 방법 3가지

1. 인라인 이벤트 처리

<button onclick="handler(event, 값, 값)">버튼</button>

function handler(event, 변수, 변수) {
	// 수행문;
}

2. 엘리먼트 객체의 이벤트 프로퍼티를 이용한 이벤트 처리

<button id="btn-add">버튼</button>

let btn = document.getElementById("btn-add");
btn.onclick = function(event) {
	// 수행문;
}

3. 엘리먼트 객체의 addEventListener 메소드를 이용한 이벤트 처리

<button id="btn-add">버튼</button>

let btn = document.getElementById("btn-add");
btn.addEventListener('click', function(event) {
	// 수행문;
})

 

---

< 해당 글은 velog에서 이전하며 옮겨온 글로, 가독성이 좋지 않을 수 있는 점 양해 부탁드립니다. >

🔗 velog 버전 보기 : https://velog.io/@ryuneng2/JavaScript-이벤트-처리-방법-3가지