한 걸음씩

[JS][multicampus] Controlling event 본문

JS

[JS][multicampus] Controlling event

winter17 2023. 3. 16. 13:32

1.  event

 ► event 

  • 무언가 일어났다는 신호, 사건 (모든 DOM 요소는 이러한 신호를 만들어 냄)
  • 종류 : 마우스, 인풋, 키보드, 터치 등
  • DOM 요소는 event를 받고, 받은 event를 '처리'(이벤트 핸들러/처리기)할 수 있음

 ► event handler

  • 이벤트가 발생했을 때 실행되는 함수 (사용자의 행동에 어떻게 반응할지를 JS코드로 표현한 것) 
EventTarget.addEventListener(type, handler)
  • EventTarget : DOM 요소
  • type : 특정 이벤트, 이벤트 이름 ('click')
  • handler : 발생한 이벤트 객체를 수신하는 콜백 함수, 콜백 함수는 발생한 Event Object를 유일한 매개변수로 받음
  • .addEventListener(): 대표적인 이벤트 핸들러 중 하나(특정 이벤트를 DOM요소가 수신할 때마다 콜백 함수를 호출)
  • "대상에 특정 Event가 발생하면, 할 일을 등록한다."
<body>
  <button id="btn">버튼</button>

  <script>
    // id가 btn인 요소 선택
    const btn = document.querySelector('#btn')
    console.log(btn)

    // 선택한 버튼에 이벤트 핸들러 부착
    // 버튼에서 click 이벤트가 발생될때마다 함수가 실행됨
    btn.addEventListener('click', function (event) {
      // 이벤트 객체
      console.log(event) // this보다는 event.target이 객체를 볼 수 있기 때문에 유용
      // 이벤트가 발생한 대상
      console.log(event.target) 
      console.log(this)
    })
  </script>
</body>

버튼 클릭 시 PointerEvent부분 실행

btn.addEventListener('click', (event) => {
      // 이벤트 객체
      console.log(event)
      // 이벤트가 발생한 대상
      console.log(event.target)
      console.log(this) // 화살표 함수에서 this는 외부에서 가져오는데
      // 현재 외부에는 아무것도 없기 때문에 window객체(전역변수)를 가져온다는 것 주의하기
    })

 

https://developer.mozilla.org/en-US/docs/Web/Events

 

Event reference | MDN

Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events

developer.mozilla.org

2.  Event handler 활용

 ► click  

  • 버튼을 클릭하면 숫자를 1씩 증가

<body>
  <button id="btn">버튼</button>
  <p id="counter">0</p>

  <script>
    // 초기값
    let countNumber = 0

    // id가 btn인 요소 선택
    const btn = document.querySelector('#btn')
    console.log(btn)

    // 선택한 버튼에 이벤트 핸들러 부착
    // 버튼에서 click 이벤트가 발생될때마다 함수가 실행됨
    btn.addEventListener('click', function () {
      console.log('버튼 클릭!')

      // countNumber를 증가시키고
      countNumber += 1

      // id가 counter인의 요소의 컨텐츠를 변경
      const counter = document.querySelector('#counter')
      counter.textContent = countNumber
    })
  </script>
</body>

 

 ► input  

  • 사용자의 입력 값을 실시간으로 출력하기

입력창에 글자를 입력할 때 마다 실시간으로 반영됨
console창에 반영되는 input

<body>
  <input type="text" id="text-input">
  <p></p>

  <script>
    // input 요소 선택
    const textInput = document.querySelector('#text-input')

    // 이벤트 핸들러 부착
    textInput.addEventListener('input', function (event) {
      // console.log(event)
      // console.log(event.target)
      console.log(event.target.value)

      // input에 작성한 value를 p 태그의 컨텐츠로 출력하기
      const pTag = document.querySelector('p')
      pTag.textContent = event.target.value 
    })
  </script>
</body>

 

► click & input

  • 사용자의 입력 값을 실시간으로 출력하기
  • 버튼을 클릭하면 출력한 값의 스타일을 변경하기

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

  <script>
    // 인풋
    const input = document.querySelector('#text-input')

    input.addEventListener('input', function (event) {
      const h1Tag = document.querySelector('h1')
      h1Tag.textContent = event.target.value
    })

    // 버튼
    const btn = document.querySelector('#btn')

    btn.addEventListener('click', function () {
      const h1 = document.querySelector('h1')
      // 클래스 blue를 토글하기
      h1.classList.toggle('blue')
    })
  </script>

</body>

 

 ► 이벤트 취소하기

  • 텍스트를 복사하려고 하면 알림 창을 띄우면서 복사를 중단하기
  • .preventDefault() : 현재 Event의 기본 동작을 중단

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

  <script>
    const h1 = document.querySelector('h1')

    h1.addEventListener('copy', function (event) {
      // copy event를 취소
      event.preventDefault()
      alert('삐빅 복사 할 수 없습니다.')
    })
  </script>
</body>

 

3.  활용

 ► todolist

  • 할 일을 입력하고 버튼을 클릭하면 할 일 요소를 생성
  • input 컨텐츠를 작성하지 않는다면 경고 알림 출력

<body>
  <input type="text" class="input-text">
  <button id="btn">+</button>
  <ul></ul>

  <script>
    const addTodo = function (event) {
      event.preventDefault()
      const inputTag = document.querySelector('.input-text')
      const data = inputTag.value

      if (data.trim()) {
        const liTag = document.createElement('li')
        liTag.textContent = data
        const ulTag = document.querySelector('ul')
        ulTag.appendChild(liTag)
        inputTag.value = ''
      } else {
        alert('할 일을 입력하세요')
      }
    }

    const btn = document.querySelector('#btn')
    btn.addEventListener('click', addTodo)
  </script>

 

► lotto 번호 생성기

  • '행운 번호 받기' 버튼 누를때 마다 6개의 번호 생성

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

  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    const button = document.querySelector('#btn')

    button.addEventListener('click', function () {
      //랜덤 숫자 6개 만들기
      const numbers = _.sampleSize(_.range(1, 46), 6)

      const divTag = document.querySelector('div')
      const ulTag = document.createElement('ul')

      //공 만들기
      numbers.forEach((number) => {
        const ball = document.createElement('li')
        ball.textContent = number
      
      //ball을 ul 요소의 자식으로 추가
      const result = document.querySelector('#result')
      ulTag.appendChild(ball)
      })
      //완성된 ul요소를 div 요소의 자식으로 추가
      divTag.appendChild(ulTag)
    })
  </script>

</body>

▷ lodash

  • 모듈성, 성능 및 추가 기능을 제공하는 JS 유틸리티 라이브러리
  • array, object 등 자료구조를 다룰 때 사용하는 유용하고 간편한 함수들을 제공
  • https://lodash.com

4.  참고

 

'JS' 카테고리의 다른 글

[JS][Udemy] JavaScript Functions 1  (0) 2023.03.20
[JS][Udemy] todolist project  (0) 2023.03.20
[JS][multicampus] Functions  (0) 2023.03.15
[JS][udemy] Loops  (0) 2023.03.15
[JS][udemy][multicampus] JS Object Literals  (0) 2023.03.14
'JS' Related Articles more