JS 이벤트 핸들러

WEB/JS

JS 이벤트 핸들러

Hard_Try 2021. 1. 8. 23:05

마우스 이벤트

이벤트 타입	설명
`mousedown`	마우스 버튼을 누르는 순간
`mouseup`	마우스 버튼을 눌렀다 떼는 순간
`click`	왼쪽 버튼을 클릭한 순간
`dblclick`	왼쪽 버튼을 빠르게 두 번 클릭한 순간
`contextmenu`	오른쪽 버튼을 클릭한 순간
`mousemove`	마우스를 움직이는 순간
`mouseover`	마우스 포인터가 요소 위로 올라온 순간
`mouseout`	마우스 포인터가 요소에서 벗어나는 순간
`mouseenter`	마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)
`mouseleave`	마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음)

키보드 이벤트

이벤트 타입	설명
`keydown`	키보드의 버튼을 누르는 순간
`keypress`	키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음)
`keyup`	키보드의 버튼을 눌렀다 떼는 순간

포커스 이벤트

이벤트 타입	설명
`focusin`	요소에 포커스가 되는 순간
`focusout`	요소로부터 포커스가 빠져나가는 순간
`focus`	요소에 포커스가 되는 순간 (버블링이 일어나지 않음)
`blur`	요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)

입력 이벤트

이벤트 타입	설명
`change`	입력된 값이 바뀌는 순간
`input`	값이 입력되는 순간
`select`	입력 양식의 하나가 선택되는 순간
`submit`	폼을 전송하는 순간

스크롤 이벤트

이벤트 타입	설명
`scroll`	스크롤 바가 움직일 때

윈도우 창 이벤트

이벤트 타입	설명
`resize`	윈도우 사이즈를 움직일 때 발생

공통 프로퍼티

프로퍼티	설명
`type`	이벤트 이름 ('click', 'mouseup', 'keydown' 등)
`target`	이벤트가 발생한 요소
`currentTarget`	이벤트 핸들러가 등록된 요소
`timeStamp`	이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초)
`bubbles`	버블링 단계인지를 판단하는 값

공통 프로퍼티들은 이벤트 타입과 상관없이 모든 이벤트 객체들이 공통적으로 가지고 있는 프로퍼티이다.

마우스 이벤트 프로퍼티

프로퍼티	설명
`button`	누른 마우스의 버튼 (0: 왼쪽, 1: 가운데(휠), 2: 오른쪽)
`clientX, clientY`	마우스 커서의 브라우저 표시 영역에서의 위치
`pageX, pageY`	마우스 커서의 문서 영역에서의 위치
`offsetX, offsetY`	마우스 커서의 이벤트 발생한 요소에서의 위치
`screenX, screenY`	마우스 커서의 모니터 화면 영역에서의 위치
`altKey`	이벤트가 발생할 때 alt키를 눌렀는지
`ctrlKey`	이벤트가 발생할 때 ctrl키를 눌렀는지
`shiftKey`	이벤트가 발생할 때 shift키를 눌렀는지
`metaKey`	이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키)

키보드 이벤트 프로퍼티

프로퍼티	설명
`key`	누른 키가 가지고 있는 값
`code`	누른 키의 물리적인 위치
`altKey`	이벤트가 발생할 때 alt키를 눌렀는지
`ctrlKey`	이벤트가 발생할 때 ctrl키를 눌렀는지
`shiftKey`	이벤트가 발생할 때 shift키를 눌렀는지
`metaKey`	이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키)

클릭 시 이벤트 핸들러에 의해 완료가 되는 js

const toDoList = document.querySelector('#to-do-list');
const items = toDoList.children;

function updateToDo(event) {
  event.target.classList.toggle('done');
}

for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', updateToDo);
}

이벤트 버블링

어느 하나의 요소의 이벤트 발생 시 이 요소에 할당된 이벤트 핸들러가 동작하고 같은 타입의 이벤트에 한해 부모요소의 핸들러도 동작하게 된다. 가장 최상단의 요소에 도달할 때 까지 동작하는 것을 말한다.

이벤트 객체의 target 은 이벤트가 시작한 지점을 담고 있다. 이벤트 핸들러가 등록된 프로퍼티에 접근하고 싶으면 currentTarget 프로퍼티를 사용하면 좋다.

버블링을 멈추기위해 stropPropagation 을 사용하면 해당 코드가 들어간 반복문이나 구간은 버블링이 일어나지 않도록 할 수 있다.

캡처링

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>JS with Codeit</title>
  </head>
  <body>
    <div id="content">
      <h1 id="title">오늘 할 일</h1>
      <ol id="list">
        <li class="item">자바스크립트 공부</li>
        <li class="item">독서</li>
      </ol>
    </div>
    <script src="index.js"></script>
  </body>
</html>

이벤트가 발생하면 가장 먼저, 그리고 버블링의 반대 방향으로 진행되는 이벤트 전파 방식을 말한다.

이벤트가 발생하면 가장 먼저 window 객체에서부터 target까지 이벤트 전파가 일어납니다. (캡쳐링 단계) 그리고 나서 타깃에 도달하면 타깃에 등록된 이벤트 핸들러가 동작하고, (타깃 단계) 이후 다시 Window 객체로 이벤트가 전파됩니다. (버블링 단계)

상황에 따라서는 캡쳐링 단계에서 부모 요소의 이벤트 핸들러를 동작시켜야 할 수도 있다. 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener에 세번째 프로퍼티에

true

또는

{capture:true}

를 전달하면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Codeit Acid Rain</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>DIV
    <ul>UL
      <li>LI</li>
    </div>
  </form>
  
  <script>
    for (let elem of document.querySelectorAll('*')) {
      elem.addEventListener("click", e => alert(`캡쳐링 단계: ${elem.tagName}`), true);
      elem.addEventListener("click", e => alert(`버블링 단계: ${elem.tagName}`));
    }
  </script>
</body>
</html>