[JS] 이벤트 객체

in Study on Study, JavaScript
[JS] 이벤트 객체

이벤트

이벤트는 사용자의 어떤 행동에 의해 생기는 어떤 변화를 말한다.
이벤트가 발생하는 시점이나 순서는 ‘사용자’ 맘대로이므로 접근방식이 달라야 한다.

이벤트 실행 방식은 다음과 같다.
이벤트 발생! => 이벤트 감지! => 이벤트 처리!

이 때, 이벤트가 발생하면 실행하는 함수를 이벤트 핸들러라고 한다.

이벤트의 종류

기본

  • ‘a’ 요소를 클릭 하면 해당 페이지로 이동
  • 브라우저 화면에서 우측 마우스 클릭시 나오는 메뉴
  • ‘form’요소 내 ‘submit’ 버튼 클릭하면 지정 경로로 내용 전송

마우스 이벤트

|이벤트명|설명| |—-|—–| |클릭| | |click (onclick)|마우스 버튼 클릭후 손 떼기| | | el.onclick : “이벤트 처리”;| | | el.addEventListener(“click”,이벤트 처리 및 콜백함수)| |dbclick (ondbclick)|마우스 버튼을 두 번 연속 더블 클릭|

키보드 이벤트

|이벤트명|설명| |—–|—-| |keydown (onkeydown)|키를 누르는 순간| |keyup (onkeyup)|키를 눌렀다 떼는 순간| |keypress (onkeypress)|키를 눌러 문자가 연결되었을 때| | |= 화면에 글자가 완성되는 경우| | |= 그리고 키를 누르고 있는 동안 이벤트도 계속 발생됨|

폼 이벤트

|이벤트명|설명| |—–|—-| |submit (onsubmit)| 폼 제출 버튼 누르기| | |버튼 누르거나 필드에서 엔터 누르기| |reset (onreset)|폼을 초기화하기| |change (onchange)|폼 필드에서 변경이 일어남 (input 요소의 텍스트 변동, radio 버튼의 클릭 등)| |focus (onfocus)|웹브라우저가 특정요소에 포커싱함| | |예를 들어 해당 요소를클릭하거나 마우스 커서를 놓을 때 등| |select (onselect)|텍스트 필드 등의 텍스트 선택했을 때|

값 변경 이벤트

|이벤트명|설명| |——|—| |input (oninput)|값이 입력될 때| | |input (text, checkbox, radio), select, textarea 요소 내 값이 입력될 때| |change (onchange)|폼 필드에서 변경이 일어남| | |input요소의 텍스트 변동, radio 버튼의 클릭 등| | |input(text, checkbox, radio), select, textarea 요소 내 값이 변경될 때|

이벤트 객체

이벤트 객체는 이벤트 발생시 전달되는 정보.
특정 이벤트와 연관된 객체로, 해당 이벤트에 대한 정보를 담고 있다.
이는 이벤트 핸들러에 전달되는 인수(매개변수)이다.
보통 ==event, e, ev== 등으로 표시한다.

이벤트 객체의 주요 속성 (property)

|속성명|설명| |—-|—| |type|이벤트 종류| |target|이벤트를 발생시킨 요소 타겟팅 (ex. event.target.id)| |currentTarget|이벤트 버블링단계에서의 현재 요소를 가리킴| |key|눌린 키의 값| |keyCode|눌린 키의 코드| |altKey|Alt키 눌린 여부 (true, false)| |ctrlKey|Ctrl키 눌린 여부| |shiftKey|시프트 키 눌린 여부| |which|keypress 이벤트에서 눌린 키 코드의 값|

이벤트 핸들러 (이벤트 리스너)

이벤트가 발생했을 때, 이에 반응하도록 ==실행 코드에 연결== 하는 처리기 혹은 실행을 담당하는 코드.

이벤트 핸들러 (Event Handler)

==하나의 요소==에 ==하나의 이벤트=만 처리 가능

  1. HTML요소의 ==on—-==속성에 등록하기 (태그에 직접 지정 -> 인라인 이벤트 핸들러)
    그러나 ==관심사 분리==를 위해 리액트 등의 프레임워크/라이브러리에서 작성하는게 아닌 이상 인라인 이벤트 핸들러 방식으로 이벤트를 처리하지 않는게 좋다.
<button onclick="func()">클릭하라</button>
  1. JS에서 DOM요소의 프로퍼티에 등록하기

case1.

el.onclick = Function;

//객체명.on이벤트명 = 호출할 함수명;

case2.

el.onclick = function(){
  console.log('클릭했나')
}

이벤트 리스너 (Event Listener)

==하나의 요소==에 ==여러 이벤트== 처리 가능
이벤트 핸들러보다 요걸 자주 쓰자.

  1. addEventListener 메소드 등록하기
    1. HTML태그요소에 해당 이벤트 리스너를 요소 객체의 메소드와 연결시켜 이벤트가 발생했을 때, 원하는 처리 실행하기.

    target.addEventListener(type, 콜백함수[,타겟팅종류])

type: 이벤트 유형(‘click’, ‘dbclick’등)
콜백함수: 이벤트 처리 내역
타겟팅 종류: true/false(true: 캡처링, flase: 버블링 단계/기본값)

실습

커피, 주스라는 버튼을 만들어,
각 버튼을 누를 때마다 콘솔에 출력시키기.

  • html 만들기
<body>
    <button>커피</button>
    <button>주스</button>
    <script src="script.js"></script>
</body>
  • script 작성
let menus = document.querySelectorAll("button");

let btnCoffie = menus[0];
let btnJuice = menus[1];
  
btnCoffie.onclick = handleClick;
btnJuice.onclick = handleClick;


function handleClick(event) {
    let currentMenu = event.target.textContent;
    //btnCoffie 혹은 btnJuice 요소의 '텍스트' = currentMenu
    console.log(currentMenu + "를 주문하셨습니다만 문제라도?");
}

©lunadein2022 2022. All rights reserved.