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

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

이벤트 위임 보강 영상

2021-02-24T08:24:22.238Z

211

leehyunju

작성한 질문수 20

<!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>
이렇게 영상보고 잘 따라 했는데,
버튼을 눌러도 콘솔창에 아무런 증상이 없습니다...! ㅠㅠ
어떤 부분이 문제인지 잘 모르겠어요.

javascript 인터랙티브-웹 HTML/CSS

답변 1

1분코딩

2021-03-01T07:23:15.105Z

이벤트 위임을 처리하는 방법 두가지를 동시에 사용하셔서 그런건데요~
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>

ㅇ

왼쪽/오른쪽 동작시 딜레이 문제

2025-03-19T07:16:43.021Z

변수 범위 관련 질문

2025-01-13T04:28:57.827Z

106

perspective 문의

2025-01-09T01:52:28.873Z

100

생성자 함수를 클래스 함수로 변경 하고 this 오류 관련

2024-12-09T14:29:45.435Z

150

스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제

2024-12-02T14:25:11.633Z

126

animation이벤트 질문이요!

2024-11-17T13:58:23.226Z

resize handler에서 질문이 있습니다.

2024-09-13T05:55:05.149Z

110

카드 뒤집힐 때 F가 보인 이유

2024-08-22T13:19:37.994Z

149

3d 뒤집기 추가효과

2024-08-07T05:40:41.993Z

216

전진! 3D 스크롤 21 강의 질문

2024-07-10T08:35:59.721Z

171

eventlistener 질문

2024-07-07T06:14:43.235Z

148

zMove 를 1000으로 설정하는 이유에 대하여.

2024-07-03T07:42:18.195Z

168

[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!

2024-06-14T10:21:26.654Z

191

동적으로 html 생성 후 이벤트 위임 질문 있습니다.

2024-06-14T05:23:46.660Z

265

rotateY()에서 deg에 따른 차이

2024-06-13T12:55:06.236Z

196

코드 작성 순서

2024-05-17T13:22:25.569Z

275

이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??

2024-04-28T03:17:33.948Z

392

'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다

2024-04-02T02:47:26.787Z

265

섹션5 자바스크립트 이벤트 다루기 질문

2024-04-01T11:26:10.043Z

243

[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!

2023-11-10T06:46:01.283Z

423

css 는 직접 작성을 해야하는걸까용?

2023-09-14T01:01:53.773Z

324

translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?

2023-09-12T00:41:58.123Z

357

house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.

2023-09-12T00:10:50.773Z

303

left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.

2023-09-07T20:36:48.473Z

303