좋아요 버튼

---

Like button

HTML

<h1>Likes button</h1>

   <svg id="demo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2H464c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48H294.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V320 272 247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192H96c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z"/>  
  </svg>

CSS

<style>
    #demo {
      height: 50px;
      width: 50px;
      fill: #ddd;
    }
    #demo.click {
      fill: blue;
    }
  </style>

JS

<script>
  let demo = document.getElementById("demo");

  // demo 부분에 클릭 이벤트
  demo.addEventListener("click", function() {
    demo.classList.toggle('click');
  }) 
</script>

addEventlistner 함수 등록

-> 특정 DOM 요소에 이벤트 리스너 등록

DOM객체.addEventlistner(이벤트명, 실행할 함수명, 옵션)

1. 이벤트명 : JS에서 발생할 수 있는 이벤트 명을 입력
2. 함수명 : 해당 변수는 생략 가능, 해당 이벤트가 발생할 때 실행할 함수 명 입력
3. 옵션 : 옵션 생략 가능, 자식과 부모 요소에서 발생하는 버블링 제어

addEventlistner 함수 삭제

-> 웹 애플리케이션 메모리 누수의 원인이 될 수 있음
-> 더 이상 필요 없으면 반드시 삭제해야함

DOM객체. removeEventListener(이벤트명, 실행했던 함수명);