👁‍🗨javascript(DOM, 이벤트리스너, 이벤트 버블링, classList, Jquery)

DOM 이란??

• Document Object Model.
• html과 자바스크립트는 엄연히 다른 언어인데 어떻게 자바스크립트가 html을 조작할 수 있을까?

• 자바스크립트가 HTML 조작을 하기 위해선 HTML을 자바스크립트가 해석할 수 있는 문법으로 변환해놓면 됩니다.
• 그래서 실제로 브라우저는 HTML 페이지를 열어줄 때
• HTML을 자바스크립트로 쉽게 찾고 바꾸기 위해 object와 비슷한 자료형에 담아줍니다.

• 구체적으로는 var document = { } 이런 변수를 하나 만들어서 거기 넣어줍니다.
  var document = {
  div1 : {
  style : {color : 'red'}
  innerHTML : '안녕하세요'
  }
  }
• 이제 document.div1.innerHTML = '안녕' 이렇게 자바스크립트를 짜면 HTML 조작이 가능

• 브라우저는 HTML 문서를 위에서 부터 읽으며 DOM을 생성합니다.

• 혹은 자바스크립트 실행을 약간 나중으로 미루는 방법도 있음

  • $(document).ready(function(){ 실행할 코드 })
    document.addEventListener('DOMContentLoaded', function() { 실행할 코드 })
  • 이 이벤트리스너들은 "HTML을 다 읽어들였는지"를 알려주는 이벤트리스너입니다.

• document는 해당 웹페이지를 의미하며, 자바스크립트에서 html로 접근할 수 있는 방법!!

• html에서 자바스크립트로 id값을 불러오는 방법 : document.getElementId('')

  • const title = document.getElementById("title")
  • title.innerText = "got you!"

• html에서 자바스크립트로 class값을 불러오는 방법 : document.getElementClassName('')

  • html에서 해당하는 태그의 모든 내용을 array형식으로 가지고 오기 때문에 원하는 하나의 태그만 가지고 오지 못함.

• 그러나 querySelector는 element를 CSS 방식으로 검색할 수 있다!

  • class이름으로 찾을 때 const title = document.querySelector(".hello h1");
  • id이름으로 찾을 때 const title = document.querySelector("#id h1");

• querySelectorAll

  • querySelectorAll('.클래스명')[0] : 클래스명 중 첫번째 클래스명 선택!

---

이벤트 리스너

❓ 참고사항

• html의 element를 자바스크립트에서 console.dir로 찍어보면 object 형식으로 출력되는데
  그 중 on으로 시작하는 것들이 event임.
• 또, element object 안에 style이 있는 것도 볼 수 있는데 이를 통해 알 수 있는건 자바스크립트에서 각 html요소들의 style도 변경할 수 있음!
  예시) title.style.color = "blue"

• event를 실행하는 방법 2가지

  • 1. title.addEventListener("click", handlTitleClick)

    • 여기서 click은 이벤트 종류를 말하고(on은 빼고 입력해야 함.)
    • handleTitleClick은 이벤트가 실행됬을 때 실행할 함수!
      • 함수 실행버튼은 함수이름 뒤에 ()인데 왜 ()는 생략하는지? 여기선 이벤트가 발생하면 우리가 직접 실행하는게 아니라 자바스크립트에서 자동으로 실행버튼을 눌러주기 때문

    • 2번째 인자에 들어가는 함수를 콜백함수라고 부름!!!!
    • 무언가 순차적으로 작업하고 싶을 때 콜백함수를 요구함. 꼭 이벤트리스너에서만 쓰이는 개념이 아니니 콜백함수란 용어는 기억합시다.

  • 2. title.onclick = handleTitleClick

    • 이 중 이벤트 리스너를 더 많이 사용하는 이유는 나중에 removeEventListener를 통해 이벤트를 제거할 수 도 있기 때문임.

    • 이벤트 리스너를 쓰기 전까진 html 태그에 on이 붙은 이벤트를 직접 입력해줬음.
      예시) <button>버튼1</button>

• 이벤트 종류

  • 수많은 이벤트 종류가 있지만 그 중에서 몇가지만 보면
    • onmouseenter : 마우스가 해당 태그에 위치해 있을 때 실행
    • onmouseleave : 마우스가 해당 태그에서 벗어났을 때 실행
    • onmousedown : 마우스로 눌렀을 때 발생.
    • onmouseup : 마우스를 뗏을 때 발생.
    • onmousemove : 마우스를 움직일 때 이벤트 발생.
    • onclick : 해당 태그가 클릭 되었을 때 이벤트 발생
    • oncopy : 무언갈 copy 했을 때 이벤트 발생
    • onkeydown : 무슨 이벤트인지 찾아보시길...
    • onmouseover : 무슨 이벤트인지 찾아보시길...
    • onscroll : 무슨 이벤트인지 찾아보시길...

• load 이벤트리스너

• load 라는 이벤트리스너를 사용하면 DOM 생성뿐만 아니라 이미지, css, js파일이 로드가 됐는지도 체크가능합니다.

  • 셀렉터로찾은이미지.addEventListener('load', function(){
    //이미지 로드되면 실행할 코드
    })
  • 근데 외부 자바스크립트 파일에 저걸 적어놓으면
  • 그 js 파일보다 이미지가 더 먼저 로드되는 경우도 있으니 이벤트 발생체크를 못할 수도 있겠군요
  • 그러면 window를 붙여도 됨. document 에 포함된 이미지, css 파일 등 모든 것이 로드가 되었는지 체크해줌.
  • window.addEventListener('load', function(){
    //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드
    })

• ready 이런거랑 차이는 앞선 .ready()는 DOM 생성만 체크하는 함수인데,
  이것보다 약간 더 나아가서 모든 파일과 이미지의 로드상태를 체크한다고 보시면 되겠습니다.

• input, change 이벤트

  • input : input태그에 입력한 값이 변할 때 실행됨.
  • change : input태그에 입력한 값이 변할 때 실행되나 값을 입력하고 커서를 다른 곳을 찍을 때 발생함.(포커스를 잃을 때)

---

이벤트 버블링

• 이벤트가 상위 HTML로 퍼지는 현상

  • 쉽게 생각해서 종이를 겹쳐놓고 제일 위에 종이를 누르면 아래 종이들도 영향을 받는 것과 비슷.

• 이를 방지하거나 수정하기 위해 유용한 이벤트 관련 함수들!!

  • 이벤트리스너 내부 콜백함수의 파라미터 안에 e를 넣으면 아래 함수를 사용할 수 있음.

    • e.target : 유저가 실제로 누른 html 요소
    • e.currentTarget : 이벤트리스너가 달린 곳
    • e.preventDefault() : 이벤트 기본동작을 막아줌.
    • e.stopPropagation() : 내 상위요소로 퍼지는 이벤트 버블링을 막아줌!!!

  • 예시)

  document.querySelector('.black-bg').addEventListener('click', function(e){
    const black_bg = document.querySelector('.black-bg')
    if(e.target==black_bg){
      document.querySelector('.black-bg').classList.remove('show-modal')
    }
    })

  • 클릭 이벤트가 발생했을 때 유저가 실제로 누른 곳이 e.target과 같다면 show-modal이라는 클래스를 제거.

---

ClassList

• classList는 우리가 class들의 목록으로 작업할 수 있게끔 허용해줌.

  • element.classList.contains() : html element의 class가 포함되어 있는지
  • element.classList.remove() : html element의 class 제거
  • element.classList.add() : html element에 class 추가
  • element.classList.toggle(class명) : toggle 함수는 class명이 존재하는지 확인하고 존재한다면 해당 class명을 제거하고 만약 존재하지 않는다면 추가하는 기능!

Jquery

• 자바스크립트로 HTML 조작문법을 쉽게 바꿔주는 라이브러리

  • 💥주의사항! 설치한 곳 하단에서 jquery 문법 사용 가능.
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

• 기초 문법

  • querySelector → $
  • $는 querySelectorAll과도 비슷
  • addEventListener → on
  • innerHTML → html
  • style → css

• 예시)

  • <script>
      document.querySelector('.hello').innerHTML = '바보'
      → $('.hello').html('바보');

• 스타일 변경

  • $('.hello').css('color','red');

• 클래스 탈부착

  • $('.hello').addClass('show')
    // 제거는 .removeClass(), 토글은 .toggleClass()

• 이벤트 리스너 구문

  • document.querySelector('#test-btn').addEventListener('click', function(){})
    $('#test-btn').on('click',function(){})

• 💥 주의사항!!

  • $('셀렉터')로 찾으면 jquery함수만 붙일 수 있음.
    반대로 querySelector('셀럭터')로 찾으면 자바스크립트 함수만 붙일 수 있음.

• 모달창 띄우기(하나는 자바스크립트, 하나는 제이쿼리 활용)

      <div class="black-bg">
        <div class="white-bg">
          <h4>로그인하세요</h4>
          <button class="btn btn-danger" id="close">닫기</button>
        </div>
      </div> 
      
      <button class="loginBtn">로그인</button>
  
      <script>
        document.querySelector('.loginBtn').addEventListener('click', function(){
            document.querySelector('.black-bg').classList.add('show-modal')
        })
        $('.btn-danger').on('click', function(){
            $('.black-bg').removeClass('show-modal')
        })

  • loginBtn이라는 클래스를 가진 버튼을 선택해서 클릭 이벤트를 줌.
  • 클릭하면 black-bg라는 div에 show-modal이라는 클래스가 추가되서 모달창이 띄워짐.
  • btn-danger 이라는 클래스를 가진 닫기 버튼을 선택해서 클릭 이벤트를 줌.
  • 클릭하면 black-bg라는 div에 show-modal이라는 클래스가 제거되서 모달창이 사라짐.