jee's coding story

  • 홈

Front-End/JavaScript 1

자바스크립트[JavaScript] | 이벤트 위임(Event Delegation)으로 문제 해결하기

포스팅하게 된 계기 노마드 코더에서 진행하는 멜론 클론코딩 컨테스트에 참여하여 바닐라 JS로 코딩을 하던 중, 버튼을 클릭했을 때 원하는 정보를 가져오는 코드를 작성하던 중에 문제가 발생했다. 이벤트 버블링을 활용한 개념인 이벤트 위임을 이용하여 문제를 해결했고, 내용을 기억하기 위해 정리를 하기로 했다. 문제 음악 차트의 재생 버튼 부분을 구현하던 중이었고 button안에 svg 파일을 추가해 놓았다. 음악의 재생 버튼을 클릭했을 때 노래 제목을 가져와 서버에 보내면 해당 노래의 Youtube 영상을 반환하는 코드를 작성하고 있었다. 노래를 구성하고 있는 li태그의 id에 노래 제목을 적어두었다. ... ... 내가 원하는 동작은 button을 클릭하면 클릭된 노래의 제목 또는 정보를 가져오는 것이었다..

Front-End/JavaScript 2023.04.12
이전
1
다음
더보기
프로필사진

  • ٩꒰。•◡•。꒱۶ (36)
    • Front-End (16)
      • Web(HTML | CSS) (1)
      • JavaScript (1)
      • TypeScript (12)
    • Study (14)
      • Algorithm (4)
      • 파이썬[Python] (7)
      • 컴퓨터 구조 | 운영체제 (3)
    • Mobile App (3)
      • Flutter | Dart (3)
    • ETC(예전 글) (3)
      • 자바스크립트[JavaScript] (3)

Tag

클래스, javascript, 정적크롤링, 타입스크립트, 최댓값구하기, jest-environment-jsdom, typescript, 크롤링, 문자집합, python, 파이썬, function, Jest, 숫자 인코딩, dart, JS, 최대공약수계산, 자바스크립트, 알고리즘, flutter,

최근글과 인기글

  • 최근글
  • 인기글

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

  • 코드메이트
  • Github

티스토리툴바