티스토리 뷰

Javascript

자바스크립트 태그 & 이벤트 핸들러

lluna 2021. 10. 27. 09:49

1. 자바스크립트로 태그 선택하기

메소드                                                                 의미                                               결과

document.getElementById('id') HTML id속성으로 태그 선택하기 id에 해당하는 태그 하나
document.getElementsByClassName('class') HTML class속성으로 태그 선택하기 class에 해당하는 태그 모음(HTMLCollection)
document.getElementsByTagName('tag') HTML 태그 이름으로 태그 선택하기 tag에 해당하는 태그 모음(HTMLCollection)
document.querySelector('css') css 선택자로 태그 선택하기 css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나
document.querySelectorAll('css') css 선택자로 태그 선택하기 css 선택자에 해당하는 태그 모음(NodeList)

 

2. 유사 배열이란?

  • 배열과 유사한 객체 ex) HTMLCollection, NodeList, DOMTokenList, ...

특징

  1. 숫자 형태의 indexing이 가능하다.
  2. length 프로퍼티가 있다.
  3. 배열의 기본 메소드를 사용할 수 없다.
  4. Array.isArray(유사배열)의 리턴값은 false다.

 

3. 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러

  • 이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ...
  • 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일
  • 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다.

 

4. 이벤트 핸들러를 등록하는 2가지 방법

4-1. 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기

const btn = document.querySelector('#myBtn');

btn.onclick = function() {
  console.log('Hello Codeit!');
};

4-2. HTML 태그의 onclick 속성에 바로 표시하기

<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>

 

5. 이벤트 실전@

<body>
  <!-- 1. onclick 속성: alertMessage 함수 실행 -->
  <button onclick="alertMessage()">나를 눌러봐!</button>

  <!-- 2-1. addEventListener -->
  <button id="my-button">나를 눌러봐!!</button>
  <hr>

  <!-- 2-2. addEventListener -->
  <p id="my-paragraph"></p>

  <form action="#">
    <label for="my-text-input">내용을 입력하세요.</label>
    <input id="my-text-input" type="text">
  </form>
  <hr>

  <!-- 2-3. addEventListener -->
  <h2>Change My Color</h2>
  <label for="change-color-input">원하는 색상을 영어로 입력하세요.</label>
  <input id="change-color-input"></input>
  <hr>

  <script>
    // 1 함수 실행
    const alertMessage = function () {
      alert('hi')
    }
    
    // 2-1 이벤트 정의
    const myButton = document.querySelector('#my-button')
    myButton.addEventListener('click', alertMessage)

    // 2-2 내용이 바로 입력되도록 event.target.value 활용하기
    const myInput = document.querySelector('#my-text-input')
    myInput.addEventListener('input', function (event) {
      const myPtag = document.querySelector('#my-paragraph')
      myPtag.innerText = event.target.value
    })

    // 2-3 스타일 컬러 지정하기
    const colorInput = document.querySelector('#change-color-input')

    const changeColor = function () {
      const colorText = document.querySelector('h2')
      // tag 자체의 속성값 변경
      colorText.style.color = event.target.value
      // style 지정 변경
      colorText.setAttribute('style', `color:${event.target.value};`)
    }

    colorInput.addEventListener('input', changeColor)

  </script>
</body>

 

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

Arrow Function 화살표 함수 만들기  (0) 2021.11.02
ECMA Script6, DOM변경, 변수, 타입과 연산자  (0) 2021.11.02
sync, async, blocking, non-blocking  (0) 2021.11.02
Asynchronous Javascript 비동기 자바스크립트 2 #Async callbacks #Callback hell #Axios #Promise #.then #.catch # async #await  (0) 2021.11.02
Asynchronous Javascript 비동기 자바스크립트 1 #single -threaded # non-blocking #setTimeout #WebAPI #CallStack #TaskQueue #CouncurrenyModel  (0) 2021.10.28
댓글