2024.07.26 JavaScript 핵심 JS 이벤트 처리

2024.07.26 JavaScript 핵심 JS 이벤트 처리 - 2(addEventListener)

정훈5 2024. 7. 26. 09:43

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

학습 목표 

1. addEventListener() 메서드의 활용 
2. 이벤트 위임(Event Delegation)와 버블링(Bubbling)

addEventListener() 메서드의 활용 - 아이템 추가, 토글 기능 만들기

index6.html

index6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        body {
            margin: 16px;
            display:  flex;
            justify-content:  center;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            background-color: #f9f9f9;
            margin: 8px 0;
            padding:  10px;
            border: 1px solid #ccc;
            display:  flex ;
            justify-content: space-between;
            align-items:  center;
        }

    </style>
</head>
<body>

    <div>
        <h2>EventListener를 사용한 요소 추가, 삭제, 수정, 토글 만들기</h2>
            <br><br>
        <button id="addBtn">아이템 추가</button>
        <button id="toggleBtn">리스트 토글</button>
            <br><br>

        <ul id="myList">
            <li>
                아이템1
                <button class="editBtn">수정하기</button>
                <button class="deleteBtn">삭제하기</button>
             </li>
        </ul>
    </div>

    <script>
        let count = 1;
        // * 아이템 추가 기능
        // 1. 아이템 추가() 이벤트 리스너를 등록 하자.
        // 2. li 요소를 동적으로 생성하자
        // 3. UL 요소에 접근해서 자바스크립트 코드로 생성한 요소를 추가하자 
        window.document.getElementById("addBtn").addEventListener('click', function() {
            count ++;

            let newItem = document.createElement("li");
            newItem.innerHTML = ` 아이템 ${count} <button class="editBtn"> 수정하기</button>  <button class="deleteBtn">삭제하기</button> `;
            
            document.getElementById("myList").append(newItem);

        });

        // * 아이템 토글 기능을 만들어 보자.
        document.getElementById("toggleBtn").addEventListener("click", function() {
            let list = document.getElementById('myList'); 

            list.style.display = list.style.display == 'none' ?  '' : 'none';
        });

    </script>
    
</body>
</html>

2. 이벤트 위임(Event Delegation)

이벤트 리스너를 하위 요소 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는
패턴입니다. 이 패턴은 주로 동적으로 요소가 변경될 때 유용합니다.

원리

브라우저에서 이벤트는 대상 요소에서 발생하며, 이후 상위 요소로 버블링(bubbling)됩니다.
이벤트 위임을 사용하면, 상위 요소에서 하위 요소에서 발생한 이벤트를 감지할 수 있습니다.

버블링(Bubbling)

이벤트가 발생한 요소에서 시작해 DOM 트리를 따라 위로 올라가며 전파되는 이벤트 전파 방식입니다.

즉, 하위 요소에서 이벤트가 발생하면 그 이벤트는 상위 요소로 전파됩니다.

이를 통해 상위 요소에서 하위 요소의 이벤트를 감지할 수 있게 됩니다.

시나리오 코드 1 - 이벤트 버블링이란?

index7.html

index7.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index7.html  버블링 </title>
</head>
<body>
    <!-- 이벤트 전파 속성 - 버블링에 대한 개념  -->
    <div id="parent">
        <button id="child">Click me!</button>
    </div>

    <script>
        document.getElementById("parent").addEventListener('click', ()=> {
            alert("Parent Div Clicked! ");
        })

        window.document.getElementById('child').addEventListener('click', ()=> {
            alert("Button Clicked!");
        })




    </script>
    
</body>
</html>

시나리오 코드 2 - 버블링 중단하기

index8.html

index8.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index8.html  버블링 </title>
</head>
<body>
    <!-- 이벤트 전파 중단하기  -->
    <div id="parent">
        <button id="child">Click me!</button>
    </div>


    <script>
        document.getElementById("parent").addEventListener('click', ()=> {
            alert("Parent Div Clicked! ");
        });

        // 버블링 중단하기 - 인수로 event 객체를 전달 받을 수 있다.
        window.document.getElementById('child').addEventListener('click', (event)=> {
            console.log('event', event);
            alert("Button Clicked!");
            event.stopPropagation(); // 버블링 중단.
        });

    </script>
    
</body>
</html>

시나리오 코드 3 - 이벤트 위임전에 개별적인 이벤트 리스너 할당.

index9.html

index9.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index9.html  버블링 </title>
</head>
<body>
<!--  ul>li*3>button*3 -->   

<!-- 이벤트 위임에 대한 개념을 배우기 전 코드 활용 -->
<ul id="myList">
    <li><button>버튼 1</button></li>
    <li><button>버튼 2</button></li>
    <li><button>버튼 3</button></li>
</ul>
    
<script>
    // 각 버튼에 개별적으로 이벤트 리스너를 추가해보자. 단 반복문 활용
    let btns = window.document.querySelectorAll("#myList button");
    console.log("btns", btns);
    // btns.forEach(function(b) {
    //     // alert('1');
    //     console.log('b', b);
    // });

    // 화살표 함수 
    btns.forEach((button)=> {
        // alert('1');
      //  console.log('b', button);
      button.addEventListener('click', function() {
        alert('버튼 클릭 확인');
      });

    });

</script>

</body>
</html>

시나리오 코드 4 - 이벤트 위임에 활용

이벤트 위임을 사용하면, ul 요소에 하나의 이벤트 리스너만 추가하여 모든 버튼의 클릭 이벤트를 처리할 수 있습니다.

index10.html

index10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 이벤트 위임에대한 개념을 배우기 전 코드 활용 -->
    <ul id="myList">
        <li><button>버튼 1</button></li>
        <li><button>버튼 2</button></li>
        <li><button>버튼 3</button></li>
    </ul>

    <script>
        document.getElementById("myList").addEventListener('click', function(event){
            console.log(event.target); // console에 찍힌다.
            // 해당하는 target에 textContext를 가지고 오고 싶다면
            console.log(event.target.textContent); // html 콘솔에 찍힌다.

            // 연습문제 1
            // 어떤 버튼이 눌러 졌는지 alert()을 띄어 주세요.
             // alert(event.target.textContent);

            // 연습문제 2
            // 해당하는 버튼에 컨텐츠를 영어로 수정하시오.
             // event.target.textContent = 'button';
            
            //연습문제 3
            // 버튼 2 라는 글자를 가진 버튼만 글자를 수정하시오.
             alert(event.target.textContent == '버튼 2'  ? 'ㄱㅁㅇ' : event.target.textContent);


        });
     
    </script>
</body>
</html>

'JS' 카테고리의 다른 글

2024.07.30 JavaScript 핵심 JS 이벤트 처리 - 4(반복문과동적생성) (0)	2024.07.30
2024.07.30 JavaScript 핵심 JS 이벤트 처리 - 3(forms) (0)	2024.07.29
2024.07.24 JavaScript 핵심 JS 이벤트 처리 - 1 (기본) (0)	2024.07.24
2024.07.23 JavaScript 핵심 JS - 점검 6(웹 페이지 렌더링 과정) (0)	2024.07.23
2024. 07. 23 JavaScript 핵심 JS - 점검 5(Browser Object Model) (0)	2024.07.23

현재글2024.07.26 JavaScript 핵심 JS 이벤트 처리 - 2(addEventListener)

정훈5

데이터 타입(Data Type) (논리형), Light shot 설치, Jakarta, corretto JDK17, 데이터 타입(Data Type), 데이터 타입(Data Type) (문자형), sprint tool suite, 이클립스 폰트 설정, AndroidStudio, corretto JDK 17, Eclipse 설치 및 설정, 데이터 타입(Data Type) (정수형), 변수(variable), 데이터 타입(Data Type) (실수형), Eclipse 설정, Tomcat, lombok, java, Widget, Flutter,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

정훈5