event 등록 방법

자바스크립트에서 이벤트를 등록하는 세 가지 방법

---

1. 인라인 방식 (Inline Event Handler)

예시 코드:

<!-- HTML 내에 직접 이벤트 핸들러를 작성 -->
<button onclick="alert('인라인 방식 이벤트')">클릭하세요</button>

장점:

• 간단함: HTML 태그에 바로 작성하므로 빠르게 이벤트를 설정할 수 있어요.

---

2. 프로퍼티 리스너 (Property Listener)

예시 코드:

<!-- HTML -->
<button id="propBtn">클릭하세요</button>

// JavaScript
const propBtn = document.getElementById("propBtn");
propBtn.onclick = function() {
  alert("프로퍼티 리스너 이벤트");
};

장점:

• 직관적 관리: 자바스크립트 코드 내에서 요소의 프로퍼티를 사용해 이벤트를 등록할 수 있어요.

---

3. 이벤트 등록 메서드 (addEventListener)

예시 코드:

<!-- HTML -->
<button id="eventBtn">클릭하세요</button>

// JavaScript
const eventBtn = document.getElementById("eventBtn");
eventBtn.addEventListener("click", function() {  // 보통 on을 빼면 됨. 원래 onclick이었음.
  alert("addEventListener 이벤트");
});

장점:

• 유연성: 한 요소에 여러 이벤트 핸들러를 등록할 수 있고, 이벤트 캡처링/버블링 등 다양한 옵션을 제어할 수 있어요.

---

보통 유지보수와 기능 확장 측면에서 addEventListener 방식이 많이 사용됩니다.