[JavaScript] 자바스크립트 기초 복습 part8

자바스크립트 이벤트(Event) 정리

---

📌 이벤트(Event)란?

웹 페이지에서 발생하는 특정 행동이나 동작을 의미

✅ 이벤트 핸들링(Handling): 특정 이벤트에 반응하여 특정 동작을 실행하는 것을 의미
✅ 이벤트 핸들러(리스너): 특정 이벤트가 발생하면 호출되는 함수

---

📌 JS의 이벤트 종류

마우스이벤트	설명
click	요소를 클릭할 때 발생
dblclick	요소를 더블 클릭할 때 발생
mousedown	마우스 버튼을 누를 때 발생
mouseup	마우스 버튼을 뗄 때 발생
mouseover	요소 위로 마우스를 올릴 때 발생
mouseout	요소 밖으로 마우스를 뺄 때 발생
mousemove	마우스가 움직일 때 발생

키보드 이벤트	설명
keydown	키를 누를 때 발생
keyup	키를 뗄 때 발생
keypress	키를 누르고 있을 때 발생 (현재는 deprecated)

폼 이벤트	설명
submit	폼을 제출할 때 발생
change	폼 요소의 값이 변경될 때 발생
focus	폼 요소가 포커스를 받을 때 발생
blur	폼 요소가 포커스를 잃을 때 발생

문서/윈도우 이벤트	설명
load	페이지나 이미지 등이 모두 로드될 때 발생
resize	윈도우 크기가 변경될 때 발생
scroll	스크롤할 때 발생

---

📌 이벤트 핸들러 속성 및 메서드

1) HTML 이벤트 핸들러 속성 (프로퍼티)
✅ HTML 요소에 직접 이벤트 핸들러 속성을 지정

<button onclick="alert('클릭!')">클릭</button>

✅ HTML 요소를 JS 객체로 가져와 핸들러 속성을 지정

<button id="myButton">클릭</button>

<script>
    const button = document.getElementById('myButton');
    button.onclick = function() {
        alert('클릭!');
    };
</script>

2) 인라인 이벤트 핸들러
✅ HTML 태그에 직접 onclick, onkeydown 등의 이벤트 속성을 사용하여 함수 지정

<button onclick="alert('클릭!')">클릭</button>
<input type="text" onkeydown="console.log('키가 눌렸습니다!')" />

사용하지 않는 것을 권장 (유지보수와 코드 파싱에 어려움)

3) addEventListener 메서드
✅ 표준 이벤트 모델
HTML 요소에 addEventListener 메서드를 사용하여 이벤트를 등록
한 요소에 여러 개의 이벤트 핸들러 등록 가능

💡 addEventListener()은 인자로 이벤트와 콜백함수를 받음

<button id="myButton">클릭</button>

<script>
    const button = document.getElementById('myButton');

    // 첫 번째 이벤트 핸들러
    button.addEventListener('click', function() {
        alert('첫 번째 클릭!');
    });

    // 두 번째 이벤트 핸들러
    button.addEventListener('click', function() {
        console.log('두 번째 클릭!');
    });
</script>

---

📌 이벤트 객체

✅ 이벤트 객체는 이벤트 핸들러가 호출될 때 브라우저가 자동으로 생성하여 이벤트 핸들러에게 전달되는 객체로, 다양한 속성과 메서드가 포함됩니다.

🔹 type
이벤트 유형 지정 ('click', 'change' 등)

document.getElementById('btn').addEventListener('click', function(event) {
    console.log(event.type); // 'click' 출력
});

🔹 target
이벤트가 발생한 요소를 참조

'실질적'으로 이벤트가 발생한 요소

<ul id="list">
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ul>

<script>
    document.getElementById('list').addEventListener('click', function(event) {
        console.log(event.target); // 클릭한 <li> 요소 출력
    });
</script>

🔹 currentTarget
이벤트 리스너가 실제로 첨부된 요소를 참조

document.getElementById('list').addEventListener('click', function(event) {
    console.log('target:', event.target);         // 클릭된 요소 (예: <li>)
    console.log('currentTarget:', event.currentTarget); // 이벤트 리스너가 부착된 요소 (예: <ul>)
});

🔹 preventDefault()
브라우저가 해당 이벤트에 대해 기본적으로 수행하는 동작을 방지

<a href="https://www.example.com" id="link">이동</a>

<script>
    document.getElementById('link').addEventListener('click', function(event) {
        event.preventDefault(); // 링크 이동 방지
        alert('링크 클릭이 차단되었습니다!');
    });
</script>

🔹 stopPropagation()
이벤트가 전파되는 것을 방지

<div id="parent" style="padding: 20px; background-color: lightgray;">
    <button id="child">클릭</button>
</div>

<script>
    document.getElementById('child').addEventListener('click', function(event) {
        event.stopPropagation(); // 부모 요소로의 이벤트 전파 방지
        alert('버튼 클릭 이벤트 발생');
    });

    document.getElementById('parent').addEventListener('click', function() {
        alert('부모 div 클릭 이벤트 발생');
    });
</script>

---

📌 이벤트 객체 예시

🔹 마우스 이벤트
마우스의 위치(좌표), 버튼 상태 등

<button id="mouseBtn">클릭</button>

<script>
    const btn = document.getElementById('mouseBtn');

    btn.addEventListener('click', function(event) {
        console.log('클릭 이벤트 발생!');
        console.log('마우스 X좌표:', event.clientX); // 화면 기준 X 좌표
        console.log('마우스 Y좌표:', event.clientY); // 화면 기준 Y 좌표
        console.log('마우스 버튼:', event.button); // 0: 왼쪽, 1: 휠, 2: 오른쪽 버튼
    });
</script>

🔹 키보드 이벤트
눌려진 키에 대한 정보를 포함

<input type="text" id="textInput" placeholder="키 입력" />

<script>
    const input = document.getElementById('textInput');

    input.addEventListener('keydown', function(event) {
        console.log('눌린 키:', event.key);   // 'a', 'Enter' 등
        console.log('키 코드:', event.code); // 'KeyA', 'Enter' 등
        console.log('Shift 눌림 여부:', event.shiftKey); // Shift 키 동시 입력 여부
    });
</script>

---

📌 이벤트 객체 사용 방법

이벤트가 발생하는 함수(이벤트 핸들러)에 매개변수로 자동 전달됩니다.
매개변수명은 event, evt, e 등으로 명명하는 것이 권장됩니다.

✅ DOMContentLoaded 이벤트
HTML 문서가 완전히 로드되고 DOM 트리가 완성되었을 때 발생
이미지, CSS, 스크립트 파일이 아직 로드되지 않아도 이벤트 발생

✅ load 이벤트
페이지의 모든 콘텐츠가 완전히 로드된 경우에만 발생

window.addEventListener('load', function() {
  console.log('페이지의 모든 콘텐츠가 로드되었습니다.');
});

window.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 트리가 완성되었습니다.');
});

위 코드에서 load 이벤트는 모든 콘텐츠가 로드된 후 발생
DOMContentLoaded는 HTML 구조가 준비되었을 때 발생
이를 통해 JS 기능이 DOM을 완전히 인식한 후 동작하도록 설정할 수 있음

---

🚀js의 이벤트는 typeScrip에서도 자주 보일 예정