JavaScript 이벤트 버블링 & 전파 차단 & 트리거

⏰ 2024.12.02 (D+38)

1. 이벤트 버블링 (Event Bubbling)

📂 EventBasic15.html

⚙️ 핵심 동작 설명 🔧]

• 작은 이미지(.small)를 클릭하면 큰 이미지(.big)로 교체
• 부모 요소인 fieldset에 이벤트 리스너를 등록해, 자식 이미지들의 클릭 이벤트를 처리

📢 주요 개념 ]

• 이벤트 버블링은 이벤트가 자식 → 부모로 전파되는 방식
• 자식 요소마다 이벤트 리스너를 등록하지 않고, 부모에 한 번만 등록해도 자식의 이벤트를 감지 가능

fieldsetNode.onclick = function (e) {
    console.log(e.target);        // 클릭된 요소
    console.log(e.currentTarget); // 이벤트가 부착된 요소 (fieldset)

    // 클릭된 요소가 IMG이고, class에 'small'이 포함되어 있으면 실행
    if (e.target.nodeName === 'IMG' && e.target.classList.contains('small')) {
        big.src = e.target.src; // 큰 이미지의 src를 클릭한 작은 이미지의 src로 변경
    }
};

✒️ 주요 흐름 ]

1. fieldset 클릭 이벤트: 자식 이미지(.small)의 클릭이 부모 fieldset에 전달
2. 클릭된 요소 판별
   • e.target: 클릭된 요소 (이미지)
   • e.currentTarget: 이벤트 리스너가 등록된 요소 (fieldset)
3. 조건 처리: 클릭된 요소가 IMG이며, 클래스에 small이 포함된 경우에만 큰 이미지 교체

✅ 이점

• 모든 이미지에 개별적으로 이벤트 리스너를 등록하지 않아도 된다
• 유지보수가 쉬워지고, DOM 조작 횟수가 줄어든다

2. 이벤트 전파 차단

📂 EventBubbling16.html

⚙️ 핵심 동작 설명 🔧]

• 버튼 클릭: div의 배경색을 버튼의 텍스트 색상으로 변경
• span 클릭
  • span이 버튼으로 변환되거나 다시 span으로 되돌아 간다
  • 부모 요소로 이벤트가 전달되지 않도록 e.stopPropagation()을 사용

📢 주요 개념 ]

• 이벤트 전파 차단은 특정 이벤트가 상위 요소로 전달되지 않도록 한다
• 필요한 경우만 전파를 막아야 하며, 남용 시 의도하지 않은 동작이 발생할 수 있다

// fieldset에 공통적으로 onclick 이벤트 등록
fieldset2.onclick = function (e) {
    if (e.target.nodeName === 'BUTTON') {
        div.style.backgroundColor = e.target.textContent; // 버튼의 텍스트를 div 배경색으로
    }
};

// span 클릭 이벤트 처리
span.onclick = function (e) {
    e.stopPropagation(); // 부모로의 이벤트 전파 차단
    console.log('SPAN 클릭');

    var buttonNode = document.createElement('button');
    buttonNode.textContent = e.target.textContent;

    if (!toggle) {
        buttonNode.onclick = e.target.onclick; // 기존 이벤트를 버튼으로 옮김
        e.target.replaceWith(buttonNode);      // span을 버튼으로 변경
    } else {
        var newSpan = document.createElement('span');
        newSpan.textContent = e.target.textContent;
        newSpan.onclick = e.target.onclick;    // 기존 이벤트를 span으로 옮김
        e.target.replaceWith(newSpan);         // 버튼을 span으로 변경
    }
    toggle = !toggle;
};

✒️ 주요 흐름 ]

1. 버튼 클릭

• fieldset에서 클릭 이벤트를 감지
• 클릭된 요소가 버튼이면, div의 배경색을 변경

2. span 클릭

• 이벤트 전파 차단(e.stopPropagation())으로 fieldset의 이벤트가 실행되지 않음
• span과 button이 서로 전환되며 동작

3. 조건 처리: 클릭된 요소가 IMG이며, 클래스에 small이 포함된 경우에만 큰 이미지 교체

✅ 이점

• 클릭 이벤트 처리 범위를 제한하여 불필요한 동작을 방지
• 하나의 부모 요소에 다양한 이벤트 처리를 효율적으로 구현

3. 이벤트 트리거

📂 EventBubbling16.html

⚙️ 핵심 동작 설명 🔧]

• "파일찾기" 버튼을 클릭하면 숨겨진 input[type=file] 요소가 클릭된 것처럼 동작
• 파일을 선택하면, 선택한 파일명이 텍스트 입력란에 표시

📢 주요 개념 ]

• 이벤트 트리거는 자바스크립트를 사용해 특정 DOM 요소에 이벤트를 강제로 발생 시킴
• dispatchEvent() 메서드를 사용해 이벤트를 전송할 수 있다

buttonNode.onclick = function () {
    // 인위적으로 click 이벤트 생성
    var evt = new MouseEvent('click', { view: window, bubbles: true, cancelable: true });
    fileNode.dispatchEvent(evt); // file input 요소에 이벤트 전달
};

// 파일 선택 후 동작
fileNode.onchange = function () {
    var path = fileNode.value.split('\\'); // 선택한 파일 경로를 \\로 분리
    textNode.value = path[path.length - 1]; // 파일명만 텍스트 박스에 표시
};

✒️ 주요 흐름 ]

1. 파일찾기" 버튼 클릭

• MouseEvent로 input[type="file"] 요소에 클릭 이벤트 전달
• 파일 선택 창이 열림

2. 파일 선택 시

• change 이벤트가 발생
• 선택한 파일 경로를 읽어와 텍스트 박스에 표시

✅ 이점

• 사용자 경험(UX)을 개선하며, 브라우저 간 UI 차이가 없다
• input[type="file"] 요소의 기본 스타일을 커스터마이징 가능