[JS] JavaScript - 이벤트, 이벤트 핸들러

2024. 8. 11. 17:30· FE
목차
  1. 1. 이벤트란 ?
  2. 1-1. 이벤트 종류
  3. 1-2. 이벤트 핸들러
  4.  
  5.  
  6.  
  7.  
  8. 1-3. event 객체
  9.  
  10. 1-4. 이벤트 propagation

1. 이벤트란 ?

  • 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
  • 이벤트에 반응하여 자바스크립트로 요소 조종 가능! (특정 동작 수행 가능!)

 

1-1. 이벤트 종류

  • 마우스 이벤트 : 마우스 조작과 관련된 이벤트
  • 키 이벤트 : 키보드 조작과 관련된 이벤트
  • 폼 이벤트 : form 태그 관련 동작에 관련된 이벤트
    • http 메서드와 관련 ⇒ POST, PUT 등에 관련한 동작
  • 이외에도 여러 이벤트 존재

 

1-2. 이벤트 핸들러

  • 이벤트 발생 시 처리 담당하는 함수
    • addEventListener 내장함수
    • 지정된 이벤트가 발생 → 그 요소에 등록된 이벤트 핸들러 실행함
var button = document.getElementById("btn");

button.addEventListener("click", function() {
    console.log("button clicked");
});

 

1-2-1. 이벤트 핸들러 등록 - HTML 속성

  • HTML 요소의 ‘on이벤트명’ 속성에 동작 추가하는 방법
  • HTML 코드에 JS 코드가 포함되는 방식 ⇒ 권장 x !!
<button onclick = "handleClick()">Click Evenet</button>

<!-- .. -->

<script>
    function handleClick() {
        console.log("button clicked");
    }
</script>
<button onclick="console.log("button clicked")">Click Event</button>

 

1-2-2. 이벤트 핸들러 등록 - node 객체 프로퍼티

  • node 객체의 ‘on이벤트명’ 프로퍼티에 핸들러 함수 등록
var button = document.getElementById("btn");

button.onclick = function () { console.log("button clicked"); }

 

1-2-3. 이벤트 핸들러 등록 - addEventListener

  • addEvenetListener
    • 첫 번째 인수 : ‘이벤트명’ (on 붙이지 x)
    • 두 번째 인수 : 핸들러 함수
var button = document.getElementById("btn");

button.addEventListener("click", function() {
    console.log("button clicked");
});

 

1-2-4. 이벤트 핸들러 제거 - removeEventListener

button.removeEventListener("click", handleBtnClick);

 

1-3. event 객체

  • 이벤트 핸들러 함수에 첫 번째 인수로 전달되는 객체
  • 각 이벤트에 대한 정보와 기능 등을 event 객체를 통해 얻을 수 있음
var button = document.getElementById("btn");

button.addEventListener("click", function(**event**) {
    console.log("button clicked");
});

 

1-3-1. event 객체 - 마우스 정보

var button = document.getElementById("btn");

button.addEventListener("click", function(event) {
    console.log(event.clientX, evenet.clientY);
});
  • event 객체를 통해 마우스에 대한 정보를 얻을 수 있음! (위치, 클릭 정보 등)

 

1-3-2. event 객체 - 키보드 정보

window.addEventListener("keypress", function (event) {
    document.getElementById("key".innerText = event.key.toUpperCase();
});
  • event 객체를 통해 키보드에 대한 정보를 얻을 수 있음! (누른 키 정보 등)

 

1-3-3. event 객체 - target

var button = document.getElementById("btn");

button.addEventListener("click", function (event) {
    console.log(event.target);
});
  • event.target 프로퍼티를 통해 이벤트가 발생한 타겟 요소의 node 객체에 접근 가능!

 

1-3-4. event 객체 - preventDefault

  • form 태그 → submit 버튼의 기본동작 : form 제출 및 새로고침
  • 이러한 기본동작을 막기 위해 event.preventDefault() 메서드 사용!
var loginForm = document.getElementById("login-form");

loginForm.addEventListener("submit", function (event) {
		event.preventDefault();
});

 

1-4. 이벤트 propagation

  • 여러개의 부모 요소를 갖는 요소를 클릭(이벤트) 하면 ⇒ 이 이벤트는 모든 요소에서 발생함!
  • ⇒ 모든 요소(부모 요소, 자식 요소 등)에서 이벤트 캐치 가능!
  • 이벤트 발생 → DOM 트리를 통해 이벤트가 전파됨 : 이벤트 propagation

  1. capturing phase
    • 이벤트가 최상위 부모 요소 부터 이벤트가 발생한 특정 요소 (타겟) 까지 전파됨
    • addEventListener의 세번째 인자로 true 전달하면 capturing phase에서 이벤트 캐치 가능!
  2. target phase
    • 이벤트가 실제로 발생한 요소에 도달
  3. bubbling phase
    • 이벤트가 타겟 요소에서 다시 최상위 부모 요소로 전파됨
    • addEventListener의 세번째 인자를 전달하지 않으면 bubbling phase에서 이벤트 캐치 가능!
저작자표시 변경금지 (새창열림)

'FE' 카테고리의 다른 글

[JS] JavaScript - DOM  (0) 2024.08.11
[JS] JavaScript 기본 문법  (0) 2024.08.11
[CSS] CSS 기본 정리  (0) 2024.08.11
  1. 1. 이벤트란 ?
  2. 1-1. 이벤트 종류
  3. 1-2. 이벤트 핸들러
  4.  
  5.  
  6.  
  7.  
  8. 1-3. event 객체
  9.  
  10. 1-4. 이벤트 propagation
'FE' 카테고리의 다른 글
  • [JS] JavaScript - DOM
  • [JS] JavaScript 기본 문법
  • [CSS] CSS 기본 정리
공대생안씨
공대생안씨
전자공학과 학부생의 코딩 일기
티스토리
|
로그인
공대생안씨
공대생의 코딩 일기
공대생안씨
글쓰기
|
관리
전체
오늘
어제
  • All Categories (153)
    • Spring Boot (46)
      • JPA (7)
      • Lombok (2)
    • Java (21)
    • DevOps (3)
      • CI,CD (8)
      • Monitoring (2)
    • Database (7)
      • MySQL (5)
      • MongoDB (1)
      • H2 (1)
    • Trouble Shooting (5)
    • FE (4)
    • IntelliJ (3)
    • Git (3)
    • Algorithm (41)

블로그 메뉴

  • 홈
  • 태그
  • Github

공지사항

인기 글

hELLO · Designed By 정상우.v4.2.2
공대생안씨
[JS] JavaScript - 이벤트, 이벤트 핸들러
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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