⭐ 인라인 이벤트
📌 인라인 이벤트는 쓰지 않는 것이 좋다!
HTML 코드에 자바스크립트를 추가해서 사용하는인라인 코드는 코드가 섞여 유지 보수에 좋지 못한다는 치명적인 단점이 있기 때문에 지양하는 것이 좋다.
⭐ onclick 속성
onclick 속성은 HTML 요소를 클릭할 때 발생하는 이벤트인 click 이벤트가 발생 시 수행할 동작을 정의하는 한 방법이다.
⭐ addeventlistner
addEventListener 메서드는 이벤트 리스너를 HTML 요소에 추가하는 데 사용된다.
이 메서드는 다양한 이벤트를 처리할 수 있도록 유연한 방법을 제공한다.
이벤트가 발생할 때 실행할 코드를 정의할 수 있으며, 동일한 요소에 여러 개의 이벤트 리스너를 추가할 수도 있다.
element.addEventListener(event, function, useCapture);element: 이벤트 리스너를 추가할 HTML 요소.event: 반응할 이벤트 유형을 나타내는 문자열.
예: 'click', 'mouseover', 'keydown' 등.function: 이벤트가 발생할 때 실행할 함수.useCapture: (선택 사항) 이벤트 캡처링 또는 버블링 단계에서 이벤트를 처리할지를 결정하는 불리언 값. 기본값은 false로 버블링 단계에서 이벤트를 처리한다.
✔ addeventlistner의 장점
📌 1. 다양한 이벤트 타입 지원
addEventListener는 클릭, 키보드 입력, 마우스 움직임, 폼 제출 등 다양한 이벤트 타입을 지원한다. 따라서 한 가지 메서드로 여러 종류의 이벤트를 처리할 수 있다.
📌 2. 하나의 타겟에 여러 이벤트 리스너를 등록할 수 있다.
하나의 요소에 여러 개의 이벤트 리스너를 추가할 수 있다.
각 리스너는 독립적으로 작동하며, 순차적으로 실행된다.
element.addEventListener('click', function1);
element.addEventListener('click', function2);📌 3. 캡처링과 버블링 단계 처리
addEventListener는 이벤트 전파 단계(캡처링 및 버블링)를 명시적으로 지정할 수 있다.
이를 통해 이벤트 전파를 세밀하게 제어할 수 있다.
element.addEventListener('click', handler, true); // 캡처링 단계
element.addEventListener('click', handler, false); // 버블링 단계 (기본값)버블링
버블링은 이벤트가 가장 깊은 요소에서 발생한 후, 해당 이벤트가 DOM 트리의 상위 요소로 전파되는 방식이다.
즉, 이벤트가 발생한 요소에서부터 시작해 상위 부모 요소로 전파된다.
캡처링
캡처링은 이벤트가 최상위 조상 요소에서 시작하여 이벤트가 발생한 요소까지 전달되는 방식이다. 즉, 이벤트가 상위 부모 요소에서부터 하위 자식 요소로 전달된다.
📌 4. 이벤트 리스너 제거 가능
addEventListener로 추가한 이벤트 리스너를 removeEventListener 메서드를 사용해 제거할 수 있다.
이는 메모리 누수를 방지하고 필요 없는 이벤트 리스너를 정리할 수 있다는 관점에서 유용하다.
✔ click을 하면 배경이 바뀌는 addEventListener
⭐ preventDefault
preventDefault는 JavaScript에서 이벤트 핸들러 함수 내에서 호출하여 기본 이벤트 동작을 방지하는 메서드이다. 이 메서드는 HTML 요소에서 발생하는 기본 동작이 브라우저에서 자동으로 수행되지 않도록 제어하는 데 사용된다.
폼 제출: 폼 제출 전에 검증을 수행하거나 AJAX 요청을 사용하여 서버와 통신하려는 경우.링크 클릭: 페이지 이동을 방지하고 JavaScript로 동적 콘텐츠를 로드하거나 다른 동작을 수행하려는 경우.드래그 앤 드롭: 기본 드래그 앤 드롭 동작을 커스터마이즈하거나 사용자 정의 드래그 앤 드롭 동작을 구현하려는 경우.
📌 예시
가장 대표적인 예로 폼에서 제출 동작을 하면 다른 주소로 웹페이지가 이동되는데 이러한 동작을 방지할 때 사용된다
⭐ 키보드 이벤트
✔ change 이벤트
change 이벤트는 HTML 요소의 값이 변경되었을 때 발생한다.
주로 폼 요소(input, select, textarea 등)에서 사용된다. 사용자가 요소의 값을 변경한 후 포커스를 다른 곳으로 이동할 때(즉, 요소가 블러되었을 때) 발생한다.
📌change 이벤트가 발생하는 예시.
사용자가 텍스트 입력 필드의 값을 변경하고 포커스를 다른 곳으로 옮길 때 change 이벤트가 발생하는 예시이다.
✔ input 이벤트
input 이벤트는 HTML 폼 요소의 값이 변경될 때마다 발생한다. 이는 사용자가 입력할 때마다 실시간으로 이벤트를 감지할 수 있다는 점에서 change 이벤트와는 다르다. input 이벤트는 값이 변경될 때마다 즉시 발생하며, 값이 변경될 때마다 여러 번 발생할 수 있다.
✔ keydown 이벤트
keydown 이벤트는 사용자가 키보드의 키를 누르는 순간 발생한다.
keydown의 특징은 키를 계속 누르고 있는 동안에도 반복해서 발생한다.
keydown과 input의 차이
keydown: 특정 키 입력(예: 화살표 키, 기능 키 등)을 감지할 수 있음.
input: 키보드, 마우스, 붙여넣기, 드래그 등 다양한 방식으로 값이 변경될 때 발생.input은 붙여넣기까지도 감지하는 것이 장점이다.
✔ keyup 이벤트
keyup 이벤트는 사용자가 키보드의 키를 떼는 순간 발생한 다.
keyup의 특징은 키가 눌러졌다가 완전히 떼지는 순간에 한 번만 발생한다.
✔ 이벤트 객체
이벤트 핸들러 함수는 이벤트 객체를 인자로 받는다.
이 객체를 통해 다양한 정보를 얻을 수 있다:
event.key: 눌러진 키의 값 (예: 'a', 'Enter').
event.code: 키보드의 물리적 키 코드 (예: 'KeyA', 'Enter').
event.altKey, event.ctrlKey, event.shiftKey: Alt, Ctrl, Shift 키가 눌렸는지 여부.
h1 = document.querySelector('h1')
document.getElementById('inputField').addEventListener('keyup', function(event) {
h1.innerText = `Key up: , ${event.key}`;
});⭐ 이벤트 버블링 막기
버블링은 이벤트가 가장 깊은 요소에서 발생한 후, 해당 이벤트가 DOM 트리의 상위 요소로 전파되는 방식이다. 원하지 않는 요소로 전파될 수 있기에 잘 통제하며 코드를 작성해야한다.
버블링 예시
✔ e.stopPropagation()
e.stopPropagation()은 JavaScript에서 이벤트 전파를 멈추게 하는 메소드이다. 이 메소드는 이벤트가 현재의 이벤트 리스너에서 처리된 후 상위 요소로의 전파를 중지시킨다. 이벤트 전파에는 버블링과 캡처링 단계가 있으며, e.stopPropagation()은 이 두 단계에서 모두 전파를 막는다.
⭐ 이벤트 위임
캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation) 을 구현할 수 있다.
이벤트 위임 은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용된다.
이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.
공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다. 이를 이용해 이벤트를 핸들링한다.
