JavaScript 이벤트 처리(버블링, 캡처링, 트리거링 및 포커스/블러 이벤트)

⏰ 2024.12.03 (D+39)

1. Event Bubbling & Capturing (이벤트 버블링과 캡처링)

📢 핵심 개념 ]

- 이벤트 버블링 (Event Bubbling)
: 이벤트가 자식 요소에서 부모 요소로 전파되는 방식
💡 기본적으로 이벤트는 버블링 방식으로 동작

- 이벤트 캡처링 (Event Capturing)
: 이벤트가 부모 요소에서 자식 요소로 전파되는 방식
💡 useCapture를 true로 설정하여 캡처링 방식으로 처리 가능

🖥️ 코드 설명 ]

• 이미지 클릭 시 부모 fieldset 요소에서 이벤트를 처리하도록 설정
• 이벤트 핸들러에서는 e.target(이벤트가 발생한 요소)와 e.currentTarget(이벤트 핸들러가 부착된 요소)을 비교하여 이벤트를 처리
• 버튼 클릭 시 span 요소의 텍스트가 바뀌고, 다른 요소들에 이벤트가 전파되지 않도록 stopPropagation 사용

⌨️ 코드 주요 부분 ]

fieldsetNode.onclick = e => {
    if (e.target.nodeName !== 'IMG') return;
    big.src = e.target.src;  // 작은 이미지를 클릭하면 큰 이미지로 바꿈
};

2. Event Trigger (이벤트 트리거링)

📢 핵심 개념 ]

- 이벤트 트리거링 (Event Bubbling)
: 자바스크립트를 사용하여 버튼 클릭을 통해 input[type="file"] 요소의 클릭 이벤트를 강제로 발생
💡 이로 인해 사용자는 파일 선택 대화상자를 열 수 있다

🖥️ 코드 설명 ]

• 버튼을 클릭하면 MouseEvent를 사용해 input[type="file"]에 클릭 이벤트를 트리거한다
• 파일을 선택한 후에는 선택한 파일의 경로를 텍스트 박스에 표시

⌨️ 코드 주요 부분 ]

buttonNode.onclick = () => {
    var evt = new MouseEvent('click', { view: window, bubbles: true, cancelable: true });
    fileNode.dispatchEvent(evt);  // 파일 선택 대화상자 열기
};

3. Keyboard Event (키보드 이벤트)

📢 핵심 개념 ]

✅ keydown
: 키가 눌렸을 때 발생하는 이벤트

✅ keyup
: 키가 눌렸다가 떼어졌을 때 발생하는 이벤트

✅ keypress
: 글자 키가 눌렸을 때 발생하는 이벤트
💡(권장되지 않음, 최신 웹에서는 keydown을 사용).

✅ beforeinput
: 사용자가 텍스트를 입력하기 전에 발생하는 이벤트

🖥️ 코드 설명 ]

• keydown 이벤트에서 사용자가 누른 키와 그 키 코드 (key, keyCode, which)를 출력
• beforeinput 이벤트는 사용자가 텍스트를 입력하기 전의 상태를 감지하는 데 사용

⌨️ 코드 주요 부분 ]

inputNode.onkeydown = function(e) {
    console.log('이벤트 명:', e.type);
    console.log('사용자가 입력한 키:', e.key);
    if (e.key.toUpperCase() === 'ENTER') {
        console.log(this.value);
    }
};

4. Focus & Blur Event (포커스 및 블러 이벤트)

📢 핵심 개념 ]

✅ focus
: 요소가 포커스를 얻었을 때 발생하는 이벤트

✅ blur
: 요소가 포커스를 잃었을 때 발생하는 이벤트

✅ focusin / focusout
: focus와 blur 이벤트는 버블링이 되지 않지만, focusin과 focusout은 버블링이 발생

🖥️ 코드 설명 ]

• nput 요소에 포커스가 가면 텍스트가 변경되거나 다른 요소로 포커스를 이동시키는 등의 동작을 구현
• onfocus, onblur 이벤트 리스너를 사용하여 포커스를 얻거나 잃었을 때의 동작을 제어 가능

⌨️ 코드 주요 부분 ]

txtNode.onfocus = function() {
    this.hidden = true;
    pwdNode.hidden = false;
    pwdNode.focus();
};
pwdNode.onblur = function() {
    if (this.value.trim() === '') {
        this.hidden = true;
        txtNode.hidden = false;
    }
};