OnKeyUp vs AddEventListener: 이벤트 처리 방식의 차이점

1. OnKeyUp (HTML 속성 방식)

onkeyup는 HTML 태그에 직접 이벤트 핸들러를 지정하는 방법. 이 방식은 사용자가 키보드를 눌렀다가 떼었을 때 발생하는 키업(KeyUp) 이벤트를 처리할 수 있게 해줌.

사용 예

<input type="text" onkeyup="alert('키가 떼졌습니다!')">

특징

• 간단한 이벤트 처리: 이벤트 핸들러를 HTML 태그 내에서 바로 정의할 수 있어 빠르고 간단하게 처리.
• 제한적인 사용: 한 요소에 여러 개의 이벤트 리스너를 설정할 수 없고, 이벤트 처리 로직이 HTML에 삽입되므로 유지보수에 불편함이 있을 수 있음.
• 코드 중복: 여러 곳에서 같은 이벤트 처리를 해야 할 경우, 코드 중복이 발생할 수 있음.

2. AddEventListener (JavaScript 방식)

addEventListener는 JavaScript에서 제공하는 메서드로, 이벤트 리스너를 동적으로 추가할 수 있음. HTML 요소에 이벤트가 발생할 때 실행될 함수를 JavaScript 코드에서 설정하는 방식. 더 유연하고 유지보수에도 유리.

사용 예

let inputElement = document.getElementById('myInput');
inputElement.addEventListener('keyup', function() {
  alert('키가 떼졌습니다!');
});

특징

• 여러 개의 이벤트 리스너 가능: 동일한 요소에 여러 개의 이벤트 리스너를 동시에 추가할 수 있어 더 유연하게 이벤트를 처리할 수 있음.
• 코드 분리: JavaScript 코드에서 이벤트 핸들러를 작성하므로, HTML과 JavaScript를 분리할 수 있어 코드 유지보수와 관리가 용이.
• 더 많은 제어 가능: 이벤트 캡처링과 버블링 옵션을 설정할 수 있어, 이벤트 흐름을 더 세밀하게 제어할 수 있음.

3. OnKeyUp vs AddEventListener: 주요 차이점

구분	OnKeyUp	AddEventListener
사용 위치	HTML 속성	JavaScript 코드
이벤트 리스너 개수	하나만 설정 가능	여러 개 설정 가능
장점	간단하고 빠름	코드 분리와 관리 용이, 더 많은 제어 가능
유연성	낮음	높음

4. 언제 어떤 방식을 사용해야 할까?

• 간단한 이벤트 처리: 이벤트가 한 번만 발생하거나, 빠르게 구현하고 싶은 경우에는 onkeyup 같은 HTML 속성 방식이 적합.
• 복잡한 이벤트 처리 및 유지보수: 여러 개의 이벤트 리스너를 추가하거나, 코드의 가독성 및 유지보수를 중요시한다면 addEventListener 방식을 사용하는 것이 더 효율적.