반응형
snowman95
코딩수련장
snowman95
전체 방문자
오늘
어제
  • 분류 전체보기 (229)
    • 앱테크 (3)
    • 옵시디언 (5)
    • 드라마, 영화 (1)
    • 개발자 이야기 (23)
    • 프로젝트 (10)
      • 프로젝트 방법론 (7)
      • 프로젝트 기록 (2)
      • Github (1)
    • 개발 지식 (0)
      • 디자인 패턴 (0)
    • 프론트엔드 개발 (5)
      • 테크트리 (2)
      • React.js (19)
      • ReactNative (2)
      • Next.js (6)
      • GraphQL (6)
      • 패키지 매니저 (2)
      • 라이브러리 (3)
      • 상태관리 라이브러리 (4)
      • Web 지식 (3)
      • HTML CSS (26)
      • Javascript (16)
      • 도구 (Tool) (3)
      • 성능 최적화 (1)
      • 디자인시스템 (0)
    • Python (53)
      • 모음집 (1)
      • 문법 (12)
      • 라이브러리 (15)
      • 알고리즘 (10)
      • 백준 문제풀이 (9)
      • 코딩테스트 (2)
      • 도구 (Tool) (3)
    • C++ (20)
      • 알고리즘 (6)
      • 삼성SW기출 (6)
      • 삼성 A형 (6)
    • 데이터사이언스 (1)
    • 인프라 (9)
      • 하드웨어 지식 (4)
      • Ansible (2)
      • Database (2)
      • 쉘스크립트 (1)
    • 주식 (0)
    • 취업 준비 (4)
      • 취업 이야기 (0)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • Next.js #graphql #tailwind.css
  • nextjs
  • 언어
  • 알고리즘
  • 전공 요약 #운영체제
  • 전공 요약 #네트워크
  • 삼성SW역량테스트
  • 전공요약
  • 오블완
  • 공간복잡도
  • 면접
  • GraphQL
  • 백준
  • 삼성SDS
  • 티스토리챌린지
  • C++
  • 기계식키보드 #nuphy
  • 전공 요약 #데이터베이스
  • A형
  • 나의 해방일지

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
snowman95

코딩수련장

자바스크립트 - 이벤트 함수, 이벤트 처리기
프론트엔드 개발/Javascript

자바스크립트 - 이벤트 함수, 이벤트 처리기

2021. 8. 28. 19:05
728x90
반응형

이벤트 함수


이벤트는 브라우저나 사용자가 행하는 어떤 행동이다.

 

아래의 이벤트들이 존재한다.

  • 마우스 이벤트
    종류 설명
    click HTML 요소 클릭시 발생
    dbclick HTML 요소 더블 클릭시 발생
    mousedown HTML 요소 위에서 마우스 버튼 눌렀을 때
    mouseup HTML 요소 위에서 마우스 버튼 뗄 때
    mousemove HTML 요소 위에서 마우스 버튼 움직였을 때
    mouseover HTML 요소 위에 마우스 포인터 올라갈 때
    mouseout HTML 요소 위에서 마우스 포인터 벗어날 때
  • 키보드 이벤트
    종류 설명
    keydown 사용자가 키 누르는 동안 발생
    keypress 사용자가 키 눌렀을 때 발생
    keyup 사용자가 키 뗄 때 발생


  • 문서 로딩 이벤트
    종류 설명
    abort 문서가 완전히 로딩되기 전에 불러오기 멈췄을 때 발생
    error 문서가 정확히 로딩되지 않았을 때 발생
    load 문서 로딩 끝나면 발생
    resize 문서 화면 크기 변경될 때 발생
    scroll 문서 화면이 스크롤될 때 발생
    unload 문서에서 벗어날 때 발생
  • 폼 이벤트
    종류 설명
    blur 폼 요소에 포커스를 잃었을 때 발생
    change 목록/체크 상태가 변경되면 발생
    <input>, <select>, <textarea> 태그에서 사용
    focus 폼 요소에 포커스가 놓였을 때 발생
    <label>, <select>, <textarea>, <button> 태그에서 사용
    reset 폼이 리셋되었을 때 발생
    submit submit 버튼 클릭했을 때 발생


이벤트 처리기 (이벤트 헨들러)


이벤트 처리기 또는 이벤트 헨들러는 이벤트가 발생하면 처리하는 함수를 뜻한다.

아래와 같은 형식으로 작성한다.

<태그 on이벤트명 = "이벤트헨들러함수"

(예시 1) 클릭하면 알림창 표시

<a href="#" onclick="alert('클릭했을때 알림창 표시')">버튼</a>

아래 코드는 HTML이 주인이 되어 

마우스 클릭을 했을때 click 이벤트가 호출되고, alert라는 이벤튼 처리 함수를 실행시킨다.

<body>
  <a href="#" onclick="alert('버튼을 클릭함')">Hello</a>

그러나 DOM을 사용하면 자바스크립트가 주인이 되어 HTML 요소를 가져와서 이벤트 처리기를 연결할 수 있다.

아래는 웹 요소를 여러 방법으로 가져올 수 있는데 그 중 document 객체의 querySelector() 함수로 가져오는 방법이다.

querySelector() 괄호 안에는 클래스 이름, id 이름 또는 다양한 선택자를 넣을 수 있다.

웹요소.onclick = 함수;
document.querySelector("#change").onclick = () => {
  document.querySelector("p").style.color = "#fff";
};

 

반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드 개발 > Javascript' 카테고리의 다른 글

Javascript - padStart, padEnd  (0) 2021.09.25
자바스크립트 - 브라우저와 관련된 객체 (window,document, ...)  (0) 2021.08.28
자바스크립트 - 코딩 컨벤션  (0) 2021.08.28
자바스크립트 - Generator  (0) 2021.08.22
자바스크립트 - 프로미스 (promise)  (0) 2021.08.21
    '프론트엔드 개발/Javascript' 카테고리의 다른 글
    • Javascript - padStart, padEnd
    • 자바스크립트 - 브라우저와 관련된 객체 (window,document, ...)
    • 자바스크립트 - 코딩 컨벤션
    • 자바스크립트 - Generator
    snowman95
    snowman95
    (17~19) Unity/Unreal Engine 게임 프로그래머 (20~21) System Administrator ___________ (22~) React 웹 프론트앤드 개발자 __________ 깃헙 : https://github.com/snowman95

    티스토리툴바