event / addEventListener(), preventDefault()

자바스크립트 : 이벤트 event

Event

프로그래밍 하고 있는 시스템에서 일어나는 사건 혹은 발생

 

 

 

Event object

네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한객체

마우스를 클릭, 키보드를 누르는 등 사용자 행동으로 발생할 수도 있고 특정 메서드를 호출하여 프로그래밍적으로도 만들어 낼 수 있다.

DOM 요소는 Ebent를 받고 (수신)

받은 Event를 처리할 수 있다.

event 처리는 주로 addEventListenr()라는 event 처리기(handler)를 사용해서 다양한 html 요소에 부착한다.

 

 

 

대상에 특정 event가 발생하면 할 일을 등록하자

eventtarget.addEventListener(type, listener)

addEventListener

지정한 event가 대상에 전달될 때마다 호출할 함수를 설정

event를 지원하는 모든 객체를 대상으로 지정 가능

 

type

반응 할 event 유형을 나타내는 대소문자 구분 문자열

 

listener

지정된 타입의 event를 수신할 객체

javascript function 객체 (콜백 함수) 여야 함

콜백 함수는 발생한 event의 데이터를 가진 event 기반 객체를 유일한 매개변수로 받음

 

  <button id="btn">버튼</button>
  <p id="counter">0</p>
  
  <script>
    const btn = document.querySelector('#btn')
    let countNum = 0

    btn.addEventListener('click', function (event) {
      const pTag = document.querySelector('#counter')
      countNum += 1
      pTag.innerText = countNum
    })
  </script>

버튼을 클릭하면 변수의 값이 변경된다. (이벤트 click)

id가 btn인 요소를 btn 변수에 담았고, 그 것이 click이벤트가 발생할때 함수를 실행한다.

변수를 +1 하고, 변수를 p태그의 innerText에 담는다. p태그 내용이 계속 바뀌게 된다.

 

 

  <input type="text" id="text-input">
  <p></p>
  <script>
    // 1. input 선택
    const inputTag = document.querySelector('#text-input')

    // 2. 이벤트 핸들러 부착
    inputTag.addEventListener('input', function (event) {      
      const pTag = document.querySelector('p')
      pTag.innerText = event.target.value

    })

  </script>

input에 입력하면 입력값을 실시간으로 출력 (이벤트 input)

event.taget은 event가 발생한 타겟, inputTag를 말한다.  

event.target.value는 input 태그의 value이다.

input에 작성한 값(event.target.value)을 p 태그에 넣어주었다. (innerText)

한글자 입력할 때 마다 input 이벤트가 발생하여 동작을 수행한다.

 

 

 

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

  <script>
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', function (event) {
      const h1Tag = document.querySelector('h1')
      h1Tag.classList.toggle('blue')
    })

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

btn이 click되면 함수가 실행된다. 이벤트 click이 type으로 들어가있다. (이벤트 click)

input에 입력하면 입력값을 실시간으로 출력하고,

버튼을 클릭하면 출력된 값의 클래스 토글한다. (classList.toggle)

클릭할때 마다 blue 클래스가 생겼다가 없어졌다를 반복한다. (toggle)

 

 

 

Event 취소 : event.preventDefault()

현재 Event의 기본 동작을 중단

HTML 요소의 기본 동작을 작동하지 않게 막음

 

 

const h1Tag = document.querySelector('h1')
h1Tag.addEventListener('copy', function (event) {
  event.preventDefault()
  alert('복사 할 수 없습니다!!!')
})

h1 내용을 복사할 수 없도록 copy 이벤트를 막고, alert로 경고창 띄웠다.

 

 

 

 

로또 추첨 번호 만들기

  <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 btn = document.querySelector('#lotto-btn')
    btn.addEventListener('click', function (event) {

      // 공이 들어갈 컨테이너 생성
      const ballContainer = document.createElement('div')
      ballContainer.classList.add('ball-container')

      // 랜덤한 숫자 6개를 만들기
      const numbers = _.sampleSize(_.range(1, 46), 6)
      console.log(numbers)

      // 공 만들기
      numbers.forEach((number) => {
        const ball = document.createElement('div')
        ball.innerText = number
        ball.classList.add('ball')
        ball.style.backgroundColor = 'crimson'
        ballContainer.appendChild(ball)
      })
      // 공 컨테이너는 결과 영역의 자식으로 넣기
      const resultDiv = document.querySelector('#result')
      resultDiv.appendChild(ballContainer)
    })
  </script>

 

 

 

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

html 요소부터 시작한다.

 

 

  const ballContainer = document.createElement('div')
  ballContainer.classList.add('ball-container')

div를 만들고, 선택해서 class에 ball-container를 추가했다.

 

 

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

const numbers = _.sampleSize(_.range(1, 46), 6)
console.log(numbers)

랜덤한 숫자 6개를 만들어야 한다. 자바스크립트에서 랜덤 메서드를 사용하기 위해서 자바스크립트 유틸리티 라이브러리 lodash를 cdn으로 가져왔다. array, object 등 자료구조를 다룰때 유용하다. (reverse, random, sortBy, range....) https://lodash.com/

lodash의 sampleSize를 이용해서 1부터 45에서 6개를 랜덤으로 샘플로 추출하고, 숫자를 numbers 변수에 담아준다.

 

numbers.forEach((number) => {
    const ball = document.createElement('div')
    ball.innerText = number
    ball.classList.add('ball')
    ball.style.backgroundColor = 'crimson'
    ballContainer.appendChild(ball)
})

numbers를 forEach로 하나씩 각각의 div태그를 만들어 담아주고, classList.add로 ball 클래스를 추가한다.

이때 ball.style.backgroudcolor = 'crimsm'으로 스타일을 지정해줄 수 있다.

 

 

const resultDiv = document.querySelector('#result')
resultDiv.appendChild(ballContainer)

ball-container를 result 영역의 자식으로 넣었다. (appendChild)

 

 

 

 

행운 번호 받기 버튼을 누를때 마다, 공이 한줄씩 추가된다. 

 

 

 

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

text input에 내용을 입력하고, Add 버튼을 누르면 투두리스트를 만들고 보여주도록 한다.

 

 

    formTag.addEventListener('submit', addTodo)

form 태그를 선택하고, addEventListener으로 form태그의 submit 이벤트가 발생할 떄 addTodo 함수가 실행되도록 했다.

 

 

addTodo 함수를 만든다.

 

    const addTodo = function (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)
        
        event.target.reset()
      } else {
        alert('내용을 입력하세요!')
      }
    }

submit 버튼을 눌러 submit 동작을 할때, 내가 원하는 투두리스트를 만들어주어야 한다.

form 태그의 기본 event를 막아주어야 한다. (preventDefault())

이벤트를 막았기 때문에 버튼을 눌렀을 때 submit 동작을 하지 않는다.

 

input 태그에 입력된 값을 사용하기 위해, input 태그중에 입력받는 text input 태그를 선택하기 위해 클래스선택자를 이용했다. (.inputData) -> 이것의 value값이 input태그에 입력된 값이다. (data)

 

입력된 값은 data.trim() 으로 공백을 제외한 값이 있는지로 구분한다.

이 값을 li 태그를 만들어 안에 내용을 innerText로 넣어주고, li 태그를 ul태그를 만들어 ul 태그안에 li 태그를 추가한다. (appendChild)

 

모든 동작을 하고, reset()으로 입력 값을 초기화한다.

입력된 값이 없다면 alert로 경고창을 띄우도록 한다.