[자바스크립트] event

Web/자바스크립트|2022. 10. 24. 16:50

221024 - DOM

Event

0. 개요

  • Event란 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurance)인데, 우리가 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것
    • 예를 들어 사용자가 웹 페이지의 버튼을 클릭한다면 우리는 클릭이라는 사건에 대한 결과를 응답 받기를 원할 수 있음
  • 클릭 말고도 웹에서는 각양각색의 Event가 존재함
    • 키보드의 키 입력, 브라우저 닫기, 데이터 제출, 텍스트 복사, 마우스 스크롤 등등등

0-1. Event object

  • 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체
  • Event 발생
    • 마우스를 클릭하거나 키보드를 누르는 등 사용자 행동으로 발생할 수도 있고
    • 특정 메서드를 호출하여 프로그래밍적으로도 만들어 낼 수 있음
  • DOM 요소는 Event를 받고 (’수신’)
  • 받은 Event를 ‘처리’할 수 있음
    • Event 처리는 주로 addEventListener() 라는 Event 처리기(Event handler)를 사용해 다양한 html 요소에 ‘부착’ 하게 됨

1. Event handler - addEventListener()

  • 대상에 특정 Event가 발생하면, 할 일을 등록하자
  • EventTarget.addEventListener(type, listener[, options])
    • 지정한 Event가 대상에 전달될 때마다 호출할 함수를 설정
    • Event를 지원하는 모든 객체(Element, Document, Window 등)를 대상(EventTarget)으로 지정 가능
  • listener
    • 지정된 타입의 Event를 수신할 객체
    • JavaScript function 객체(콜백 함수)여야 함
    • 콜백 함수는 발생한 Event의 데이터를 가진 Event 기반 객체를 유일한 매개변수로 받음

1-1. 이벤트 실습 - 버튼을 클릭하면 특정 변수 값 변경하기

<body>
  <button id="btn">버튼</button>
  <p id="counter">0</p>
  
  <script>
    //초기값
    let counterNumber = 0

    //ID가 btn인 요소를 선택
    const btn = document.querySelector('#btn')
    //btn이 클릭 되었을 때마다 함수가 실행됨
    btn.addEventListener('click', () => {
      counterNumber += 1
      const counter = document.querySelector('#counter')
      counter.innerText = counterNumber
    })
  </script>
</body>

1-2. 이벤트 실습 - input에 입력하면 입력 값을 실시간으로 출력하기

<body>
  <input type="text" id="text-input">
  <p></p>
  <script>
    // 1. input 선택
    const textInput = document.querySelector('#text-input')
    // 2. input 이벤트 등록
    textInput.addEventListener('input', (event) => {
      const pTag = document.querySelector('p')
      pTag.innerText = event.target.value
    })
  </script>
</body>

1-3. 이벤트 실습 - input에 입력하면 입력 값을 실시간으로 출력하고 버튼을 클릭하면 출력된 값의 클래스를 토글하기

<body>
  <h1></h1>
  <button id="btn">클릭</button>
  <input type="text">

  <script>
    const btn = document.querySelector('#btn')
    //btn이 클릭되면 함수 실행
    btn.addEventListener('click', () => {
      const h1 = document.querySelector('h1')
      h1.classList.toggle('blue')
    })

    const input = document.querySelector('input')
    input.addEventListener('input', (event) => {
      const h1Tag = document.querySelector('h1')
      h1Tag.innerText = event.target.value
    })
  </script>
</body>

 

2. Event 취소 - event.preventDefault()

  • 현재 Event의 기본 동작을 중단
  • HTML 요소의 기본 동작을 작동하지 않게 막음
  • HTML 요소의 기본 동작 예시
    • a 태그 : 클릭 시 특정 주소로 이동
    • form 태그 : form 데이터 전송

2-1. Event 취소 실습 - 웹 페이지 내용을 복사하지 못하도록 하기

<body>
  <div>
    <h1>정말 중요한 내용</h1>
  </div>

  <script>
    const h1 = document.querySelector('h1')
    h1.addEventListener('copy', (event) => {
      event.preventDefault()
      alert('삐빅 복사 할 수 없습니다.')
    })
  </script>
</body>

3. Event 종합 실습

3-1. 버튼을 클릭하면 랜덤 로또 번호 6개를 출력하기

<body>
  <h1>로또 추천 번호</h1>
  <button id="lotto-btn">행운 번호 받기</button>
  <div id="result"></div>

  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    const lottoBtn = document.querySelector('#lotto-btn')
    lottoBtn.addEventListener('click', () => {
      const result = document.querySelector('#result')
      if (result.childNodes.length >= 1) {
        result.removeChild(result.childNodes[0])
      }
      const ballContainer = document.createElement('div')
      ballContainer.classList.add('ball-container')
      let numbers = _.sampleSize(_.range(1, 46), 6)

      numbers.forEach((element, idx) => {
        const ball = document.createElement('div')
        ball.classList.add('ball')
        ball.innerText = numbers[idx]
        ball.style.backgroundColor = 'crimson'
        ballContainer.appendChild(ball)
      })

      result.appendChild(ballContainer)
      console.log(document.querySelector('#result').childNodes)
    })
  </script>
</body>

3-2 - CREATE, READ 기능을 충족하는 todo app 만들기

<body>
  <form action="#">
    <input type="text" class="inputData">
    <input type="submit" value="Add">
  </form>
  <ul></ul>

  <script>
    const formTag = document.querySelector('form')
    const addTodo = (event) => {
      event.preventDefault()

      const inputTag = document.querySelector('.inputData')
      const data = inputTag.value

      if (data.trim()) {
        const liTag = document.createElement('li')
        liTag.innerText = data

        const ulTag = document.querySelector('ul')
        ulTag.appendChild(liTag)
      } else {
        alert('할 일을 입력하세요.')
      }
      event.target.reset()
    }
    formTag.addEventListener('submit', addTodo)
  </script>
</body>
저작자표시

'Web > 자바스크립트' 카테고리의 다른 글

[자바스크립트] 동기, 비동기  (0) 2022.10.26
[자바스크립트] this  (0) 2022.10.24
[자바스크립트] DOM  (0) 2022.10.24
[자바스크립트] 변수  (0) 2022.10.19
[자바스크립트] sort()  (0) 2022.10.19

댓글()

티스토리툴바