• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

안녕하세요 질문있습니다.

21.02.24 17:24 작성 조회수 134

0

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이벤트 위임 보강</title>
  <style>

    .menu {
      display: flex;
      align-items: center;
      justify-content: center;
      background: burlywood;
      height:60vh;
    }

    .menu-btn {
      border: 5px solid white;
      border-radius: 20px;
      outline: 0;
      font: 900 1.2rem NotoSans;
      background: linear-gradient(0deg, rgba(233,210,0,1) 0%, rgba(255, 240, 0, 1) 24%, rgba(255,240,0,1) 70%,
      rgba(255,255,255,1) 100%);
      box-shadow: rgba(255,255,255,1) 0 1px 0;
      pointer-events: none;
      margin: 10px;
    }
    .btn-label {
      text-shadow: rgba(255, 255, 255, 1) 0 1px 0;
      /* pointer-events: none; */
    }
    .icon {
      width: 60px;
      /* pointer-events: none; */
    }
  </style>
</head>
<body>
  <div class="menu">
    <button class="menu-btn" data-value="1">
      <img src="./images/ilbuni_1.png" alt="" class="icon">
      <span class="btn-label">일분이1</span>
    </button>

    
    <button class="menu-btn" data-value="2">
      <img src="./images/ilbuni_2.png" alt="" class="icon">
      <span class="btn-label">일분이2</span>
    </button>


    <button class="menu-btn" data-value="3">
      <img src="./images/ilbuni_3.png" alt="" class="icon">
      <span class="btn-label">일분이3</span>
    </button>
  </div>

  <script>
    const menu =  document.querySelector('.menu');

    function clickHandler(event) {
      let elem = event.target;
      while (!elem.classList.contains('menu-btn')) {
          elem = elem.parentNode;
          //parentNode란 부모 엘리먼트를 의미한다.
          //nodeName란 태그 이름을 문자열로 갖고 있는 속성이다.
          if(elem.nodeName == 'BODY') { // BODY는 대문자로 해야됨.
            elem = null;
            return;
          }
      }

      console.log(elem.dataset.value);
      // console.log(event.target.dataset.value);ㅇ
      // console.log(event.target.getAttribute('data-value'));
    }
    
    menu.addEventListener('click', clickHandler);
  </script>
</body>
</html>
이렇게 영상보고 잘 따라 했는데,
버튼을 눌러도 콘솔창에 아무런 증상이 없습니다...! ㅠㅠ
어떤 부분이 문제인지 잘 모르겠어요.
course-thumbnail

인터랙티브 웹 개발 제대로 시작하기

이벤트 위임 보강 영상

강의실 바로가기

답변 1

답변을 작성해보세요.

0

1분코딩님의 프로필

1분코딩

지식공유자

2021.03.01

이벤트 위임을 처리하는 방법 두가지를 동시에 사용하셔서 그런건데요~
1. CSS에 설정된 pointer-events: none; 부분을 모두 삭제하시거나
또는
2. JS의 while 구문을 지우셔야 합니다.

아래 두 가지의 경우 모두 소스코드를 드려볼게요.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>이벤트 위임 보강</title>

  <style>



    .menu {

      display: flex;

      align-items: center;

      justify-content: center;

      background: burlywood;

      height:60vh;

    }



    .menu-btn {

      border: 5px solid white;

      border-radius: 20px;

      outline: 0;

      font: 900 1.2rem NotoSans;

      background: linear-gradient(0deg, rgba(233,210,0,1) 0%, rgba(255, 240, 0, 1) 24%, rgba(255,240,0,1) 70%,

      rgba(255,255,255,1) 100%);

      box-shadow: rgba(255,255,255,1) 0 1px 0;

      margin: 10px;

    }

    .btn-label {

      text-shadow: rgba(255, 255, 255, 1) 0 1px 0;

      pointer-events: none;

    }

    .icon {

      width: 60px;

      pointer-events: none;

    }

  </style>

</head>

<body>

  <div class="menu">

    <button class="menu-btn" data-value="1">

      <!-- <img src="./images/ilbuni_1.png" alt="" class="icon"> -->

      <span class="btn-label">일분이1</span>

    </button>



    

    <button class="menu-btn" data-value="2">

      <!-- <img src="./images/ilbuni_2.png" alt="" class="icon"> -->

      <span class="btn-label">일분이2</span>

    </button>




    <button class="menu-btn" data-value="3">

      <!-- <img src="./images/ilbuni_3.png" alt="" class="icon"> -->

      <span class="btn-label">일분이3</span>

    </button>

  </div>



  <script>

    const menu =  document.querySelector('.menu');



    function clickHandler(event) {

      let elem = event.target;

    //   while (!elem.classList.contains('menu-btn')) {

    //       elem = elem.parentNode;

    //       //parentNode란 부모 엘리먼트를 의미한다.

    //       //nodeName란 태그 이름을 문자열로 갖고 있는 속성이다.

    //       if(elem.nodeName == 'BODY') { // BODY는 대문자로 해야됨.

    //         elem = null;

    //         return;

    //       }

    //   }



      console.log(elem.dataset.value);

      // console.log(event.target.dataset.value);ㅇ

      // console.log(event.target.getAttribute('data-value'));

    }

    

    menu.addEventListener('click', clickHandler);

  </script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>이벤트 위임 보강</title>

  <style>



    .menu {

      display: flex;

      align-items: center;

      justify-content: center;

      background: burlywood;

      height:60vh;

    }



    .menu-btn {

      border: 5px solid white;

      border-radius: 20px;

      outline: 0;

      font: 900 1.2rem NotoSans;

      background: linear-gradient(0deg, rgba(233,210,0,1) 0%, rgba(255, 240, 0, 1) 24%, rgba(255,240,0,1) 70%,

      rgba(255,255,255,1) 100%);

      box-shadow: rgba(255,255,255,1) 0 1px 0;

      margin: 10px;

    }

    .btn-label {

      text-shadow: rgba(255, 255, 255, 1) 0 1px 0;

      /* pointer-events: none; */

    }

    .icon {

      width: 60px;

      /* pointer-events: none; */

    }

  </style>

</head>

<body>

  <div class="menu">

    <button class="menu-btn" data-value="1">

      <!-- <img src="./images/ilbuni_1.png" alt="" class="icon"> -->

      <span class="btn-label">일분이1</span>

    </button>



    

    <button class="menu-btn" data-value="2">

      <!-- <img src="./images/ilbuni_2.png" alt="" class="icon"> -->

      <span class="btn-label">일분이2</span>

    </button>




    <button class="menu-btn" data-value="3">

      <!-- <img src="./images/ilbuni_3.png" alt="" class="icon"> -->

      <span class="btn-label">일분이3</span>

    </button>

  </div>



  <script>

    const menu =  document.querySelector('.menu');



    function clickHandler(event) {

      let elem = event.target;

      while (!elem.classList.contains('menu-btn')) {

          elem = elem.parentNode;

          //parentNode란 부모 엘리먼트를 의미한다.

          //nodeName란 태그 이름을 문자열로 갖고 있는 속성이다.

          if(elem.nodeName == 'BODY') { // BODY는 대문자로 해야됨.

            elem = null;

            return;

          }

      }



      console.log(elem.dataset.value);

      // console.log(event.target.dataset.value);ㅇ

      // console.log(event.target.getAttribute('data-value'));

    }

    

    menu.addEventListener('click', clickHandler);

  </script>

</body>

</html>

ㅇ

이 글과 비슷한 Q&A