[자바스크립트] 이벤트 활용

박은정·2021년 11월 3일

JavaScript

자바스크립트

목록 보기

12/25

입력양식 form

이벤트 모델

event model
이벤트를 연결하는 방법

addEventListener() 메서드

표준 이벤트 모델

이벤트를 연결하는 표준 이벤트 모델

document.body.addEventListener('keyup', () => {})

on 으로 시작하는 속성

고전 이벤트 모델

onkeyup처럼 on으로 시작하는 속성에 함수를 할당해 이벤트 연결하는 고전 이벤트 모델

document.body.onkeyup = event => { }

인라인 이벤트 모델

이러한 고전 이벤트 모델처럼 on으로 시작하는 속성을 HTML 요소에 직접 넣어서 이벤트를 연결하는 방식

<script>
const listener = event => {}
</script>

<body onkeyup="listener(event)">
</body>

현재 위 코드에서는 listener() 라는 함수를 호출하고 있다
이때 on~ 속성 내부에서 변수 event를 활용할 수 있는데, 이 변수를 listener() 함수의 매개변수로 전달한다

이벤트 객체

모든 이벤트 모델의 이벤트 리스너는 첫 번째 매개변수로 이벤트 객체 event object 를 받는다
이벤트 객체에는 이벤트와 관련된 정보가 들어있다

키보드 이벤트

keydown

키가 눌릴 때 실행된다
키보드를 꾹 누르고 있거나 입력될 때 실행된다
웹 브라우저에 따라 아시아권의 문자를 제대로 처리하지 못하는 문제가 있긴 하지만 방향키는 처리 문제가 없기 때문에 이러한 경우에는 사용해도 괜찮다

keypress

키가 입력되었을 때 실행된다
하지만 웹 브라우저에 따라 아시아권의 문자를 제대로 처리하지 못하는 문제가 있다

keyup

키보드에서 키가 떨어질 때 실행된다

keydown 이벤트와 keypress 이벤트는 웹 브라우저에 따라 아시아권의 문자를 제대로 처리하지 못하는 문제가 있기 때문에 일반적으로는 keyup 이벤트를 사용한다

키보드 키 코드 사용하기

키보드 이벤트가 발생할 때에는 이벤트객체로 어떤 키 를 눌렀는지와 관련된 속성이 따라온다

code

입력한 키를 나타내는 문자열
인터넷 익스플로러와 구버전의 엣지 브라우저에서 지원하지 않는다

keyCode

입력한 키를 나타내는 숫자

altKey

alt 키를 눌렀는지 여부 확인 bool 자료값

ctrlKey

ctrl 키를 눌렀는지 여부 확인 bool 자료값

shiftKey

shift 키를 눌렀는지 여부 확인 bool 자료값

이벤트 발생 객체

이벤트 내부에서 문서 객체 변수를 사용해서 문서 객체와 관련된 정보를 추출할 수도 있지만
상황에 따라 이벤트 리스너 내부에서 그러한 변수에 접근할 수 없는 경우가 있다

const listner = event => {
  // 현재 블록에서는 textarea 변수를 사용할 수 없다
  const length = textarea.value.length 
  h1.textContent = `글자 수 : ${length}`
}

document.addEventListener('DOMContentLoaded', () => {
  // 이벤트 리스너가 외부로 분리됨
  const textarea = document.querySelector('textarea')
  const h1 = document.querySelector('h1')
  textarea.addEventListener('keyup', listener)
})

이벤트 리스터가 외부에 분리된 경우 이벤트를 발생시킨 객체에 접근하는 방법

1. event.currentTarget

화살표함수 function형 함수 모두 사용가능

const listner = event => {
  // event.currentTarget = textarea
  const length = event.currentTarget.value.length 
  h1.textContent = `글자 수 : ${length}`
}

document.addEventListener('DOMContentLoaded', () => {
  const textarea = document.querySelector('textarea')
  const h1 = document.querySelector('h1')
  textarea.addEventListener('keyup', listener)
})

2. this 키워드 사용

화살표 함수가 아닌 functuon형 함수를 선언한 경우만 사용 가능

const listner = function (event) {
  // this = textarea, function 형 함수에서만 가능
  const length = this.value.length 
  h1.textContent = `글자 수 : ${length}`
}

document.addEventListener('DOMContentLoaded', () => {
  const textarea = document.querySelector('textarea')
  const h1 = document.querySelector('h1')
  textarea.addEventListener('keyup', listener)
})

글자 입력 양식 이벤트

입력 양식 form

사용자로부터 어떠한 입력을 받을 때 사용하는 요소
HTML에서는 input 태그, textarea 태그, button 태그, select 태그 등이 모두 해당된다

조기 리턴 early return

조건식의 결과가 true로 나오지 않는 경우 바로 return 키워드로 리턴해서 이후의 코드를 실행하지 않는다
물론 else 키워드를 사용할 수도 있긴 하지만, 들여쓰기 단계를 하나 줄일 수 있기 때문에 코드가 깔끔해진다

if (isNaN(inch)) p.textContent = '숫자를 입력해주세요.'
else {
  const cm = inch * 2.54
  p.textContent = `${cm} cm`
}

정규표현식 regular expression

유효성검사를 더 쉽고 확실하게 구현할 수 있다

글자 입력 양식에서의 change 이벤트

원래 입력 양식은 값이 변경될 때 change 이벤트를 발생한다

입력 양식을 선택 focus 상태해서 글자를 입력하고
선택을 해제blur 상태할 때 change 이벤트를 발생한다

따라서 사용자가 입력하는중에는 change 이벤트가 발생하지 않기 때문에
실시간으로 입력된 값을 처리하기 위해 keyup 이벤트를 사용할 수 있다

드롭다운 목록

기본적으로 select 태그로 구현한다

<script>
document.addEventListener('DOMContentLoaded', () => {
  const select = document.querySelector('select')
  const p = document.querySelector('p')
  
  select.addEventListenr('change', event => {
    const options = event.currentTarget.options
    const index = options.selectedIndex
    // options[index] : 선택한 option 태그 추출
    p.textContent = `선택: ${options[index].textContent}`
  })
})
</script>

<body>
  <select>
    <option>떡볶이</option>
    <option>순대</option>
    <option>오뎅</option>
    <option>튀김</option>
  </select>
  
  <!-- 처음에는 떡볶이가 선택되어 있도록 초기값 지정 -->
  <p>선택: 떡볶이</p> 
</body>

드롭다운 목록에서 항목을 선택하면 option[index] 에서 선택한 option 태그가 출력된다
현재 코드에서는 textContent 속성을 바로 추출해서 사용했는데, option 태그에 다른 속성을 부여하고 속성을 활용할 수도 있다

multiple select

select 태그에 multiple 속성을 부여하면 Ctrl 키 또는 Shift 키를 누르고 여러 항목을 선택할 수도 있다

<script>
document.addEventListener('DOMContentLoaded', () => {
  const select = document.querySelector('select')
  const p = document.querySelector('p')
  
  select.addEventListener('change', event => {
    const options = event.currentTarget.options
    const list = []
  	// option 속성에는 forEach() 메서드가 없기 때문에 for 반복문을 사용해야 한다
    for (const option of options) {
  	  // selected 속성 확인
      if (option.selected) list.push(option.textContent)
    }
    p.textContent = `선택: ${list.join('.')}`
  })
})
</script>

<body>
  <select multiple>
    <option>떡볶이</option>
    <option>순대</option>
    <option>오뎅</option>
    <option>튀김</option>
  </select>
  <p></p>
</body>

기본 이벤트 막기

기본 이벤트

어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것을 기본 이벤트라고 한다

이미지에 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴 context menu 를 출력
링크를 클릭했을 때 이동하는 것
제출버튼을 눌렀을 때 이동하는 것

preventDefault() 메서드

기본 이벤트 제거하기 위해 event 객체의 preventDefault() 메서드를 사용한다

<script>
document.addEventListener('DOMContentLoaded', () => {
  const imgs = document.querySelectorAll('img')
  
  imgs.forEach(img => {
    img.addEventListener('contextmenu', event => event.preventDefault())
  })
})
</script>
<body>
  <img src='http://placekitten.com/300/300' alt=''>
</body>

img 태그의 contextmenu 이벤트가 발생할 때 preventDefault() 메서드를 호출해서 기본 이벤트를 막는 코드이다
이미지 불펌 방지등을 구현할 때 사용하는 코드이다

localStorage 객체

웹브라우저가 기본적으로 제공하는 객체

localStorage.getItem(key)

저장된 key를 추출한다 만약 없으면 undefined 가 나온다
객체의 속성을 추출하는 일반적인 형태로 localStorage.key 또는 localStorage[key]의 형태로 사용된다

localStorage.setItem(key, value)

값을 지정한다
객체에 속성을 지정하는 일반적인 형태로 사용할 수도 있다

localStorage.removeItem(key)

특정 키의 값을 제거한다

localStorage.clear

저장된 모든 값을 제거한다

웹 API : 웹 브라우저가 제공하는 기능

모질라 공식문서에서 필요할 때 찾아보면 좋을 것 같다

박은정

새로운 것을 도전하고 노력한다

이전 포스트

[자바스크립트] 문서 객체 조작하기

다음 포스트

[자바스크립트] 이벤트 활용