[JavaScript - 12] 이벤트 핸들링과 Value 속성

2024. 3. 31. 23:15· 프로그래밍/JavaScript
목차
  1. 이벤트 핸들링
  2. 이벤트
  3. value속성 이해하기
  4. form요소

이벤트 핸들링

이벤트

  • DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스
  • 이벤트 발생의 예
    • 웹페이지 사용자가 버튼 클릭
    • 웹페이지 사용자가 키보드를 누름
    • 웹페이지 사용자가 입력 폼의 내용 제출
    • 외 다수
  • 각 이벤트에 대한 이벤트 핸들러(handler)를 정의할 수 있음
    • 이벤트 핸들러 : 이벤트가 발생되면 실행될 코드 블록으로 주로 함수가 이 역할을 담당
    • 이벤트 핸들러 역할을 수행하는 함수를 정의하는 것이 이벤트 핸들러 등록
  • 이벤트를 처리할 타겟을 선택하고 이벤트 핸들러 속성에 이벤트 핸들러를 대입
    • 이벤트 속성에 함수를 대입할 때는 소괄호(’()’)없이 대입

addEvnetListenet()

  • onclick, onkeydonw과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 편하고 유용한 처리 방법은 addEventListener 메서드를 사용하는 것
    • 장점
      • 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재
      • 같은 리스너(타켓)에 대해 다수의 핸들러 등록 가능
      • addEventListener(이벤트명, 이벤트 핸들러)

이벤트 객체

  • 추가적인 기능과 정보를 제공하기 위해 이벤트핸들러에 자동으로 전달되는 데이터
  • 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있도록 해야 함
  • 받아서 쓰는 방법
//함수 호출
target.addEnventListener('click', function(){})

//함수 호출과 자동으로 전달되는 이벤트 객체를 매개변수 envent에 대입
//함수 호출
target.addEnventListener('click', function(evnet){})

 

value속성 이해하기

  • <input>, <select>처럼 사용자로부터 입력을 받을 때 사용하는 요소가 있는데 이 값을 읽어들이 때는 요소의 value 속성에 접근
    • 요소에 쓰인 텍스트 접근 : textContent
    • 사용자가 직접 요소에 입력한 값에 접근 : value
  • value에 접근하여 할 수 있는 읽은 크게 두 가지, 읽기와 쓰기

form요소

  • 여러 입력 요소를 포함할 수 있는 폼 요소로부터 여러 입력 값을 읽어 들일 때는, 개별 입력 요소의 name속성값을 토대로 입력값에 접근할 수 있음

 

 

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JavaScript - 14] 빌트인 생성자와 타이머 메소드  (0) 2024.03.31
[JavaScript - 13] 객체를 만드는 생성자  (0) 2024.03.31
[JavaScript - 11] 함수  (0) 2024.03.31
[JavaScript - 10] createElement, appendChild  (0) 2024.03.31
[JavaScript - 9] 조건문과 반복문  (0) 2024.03.31
  1. 이벤트 핸들링
  2. 이벤트
  3. value속성 이해하기
  4. form요소
'프로그래밍/JavaScript' 카테고리의 다른 글
  • [JavaScript - 14] 빌트인 생성자와 타이머 메소드
  • [JavaScript - 13] 객체를 만드는 생성자
  • [JavaScript - 11] 함수
  • [JavaScript - 10] createElement, appendChild
나무늘보Programmer
나무늘보Programmer
게으른 개발자가 공부하고 성장하는 과정을 기록하는 블로그 입니다.
나무늘보Programmer
게으른 개발자의 개발일기
나무늘보Programmer
전체
오늘
어제
  • 분류 전체보기 (71)
    • 수학 (0)
      • 확률과 통계 (0)
    • Computer Science(CS) (8)
      • 혼자 공부하는 컴퓨터 구조 + 운영체제 (1)
      • Network (0)
    • 프로그래밍 (57)
      • Python (8)
      • Java (1)
      • C++ (0)
      • HTML (13)
      • CSS (13)
      • JavaScript (19)
      • DB (1)
      • Spring (1)
    • 머신러닝&딥러닝 (0)
      • Computer Science(CS) (0)
      • 인공지능 (0)
      • Paper Review (0)
    • BootCamp(OZ Coding School) (3)
    • TroubleShooting (1)
    • SandBox (0)
    • Project (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
나무늘보Programmer
[JavaScript - 12] 이벤트 핸들링과 Value 속성
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.