[JS Deep Dive] 40. Event Part 2

HTML&CSS&Javascript/JS

[JS Deep Dive] 40. Event Part 2

킹우현 2023. 3. 6. 10:26

40.5) 이벤트 객체

이벤트가 발생하면 이벤트에 관련된 다양한 정보를 담고 있는 '이벤트 객체'가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.

<!DOCTYPE html>
<html>
<body>
  <p>클릭하세요. 클릭한 곳의 좌표가 표시됩니다.</p>
  <em class="message"></em>
  <script>
    const $msg = document.querySelector('.message');

    // 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
    function showCoords(e) {
      $msg.textContent = `clientX: ${e.clientX}, clientY: ${e.clientY}`;
    }

    document.onclick = showCoords;
  </script>
</body>
</html>

위 예제에서는 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달되어 매개변수 e에 암묵적으로 할당됨을 알 수 있다. (이는 브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인수로 전달받기 때문이다.)

따라서 이벤트 객체를 전달받으려면 이벤트 핸들러를 정의할 때 이벤트 객체를 전달받을 매개변수를 명시적으로 선언해야 한다. ⭐️

이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록했다면 다음과 같이 event를 통해 이벤트 객체를 전달받을 수 있다.

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body { height: 100%; }
  </style>
</head>
<!-- 이벤트 핸들러 어트리뷰트 방식의 경우 event가 아닌 다른 이름으로는 이벤트 객체를
전달받지 못한다. -->
<body onclick="showCoords(event)">
  <p>클릭하세요. 클릭한 곳의 좌표가 표시됩니다.</p>
  <em class="message"></em>
  <script>
    const $msg = document.querySelector('.message');

    // 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
    function showCoords(e) {
      $msg.textContent = `clientX: ${e.clientX}, clientY: ${e.clientY}`;
    }
  </script>
</body>
</html>

이벤트 핸들러 어트리뷰트 방식의 경우 이벤트 객체를 전달받으려면 이벤트 핸들러의 첫 번째 매개변수 이름이 반드시 event 이어야 한다.

function onclick(event) {
  showCoords(event);
}

이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성되는 이벤트 핸들러의 함수 몸체를 의미하는데, 이때 암묵적으로 생성된 onclick 이벤트 핸들러의 첫 번째 매개변수의 이름이 event로 암묵적으로 명명되기 때문에 event가 아닌 다른 이름으로는 이벤트 객체를 전달받지 못하는 것이다.

40.5.1 이벤트 객체의 상속 구조

이벤트 객체는 다음과 같은 상속 구조를 갖는다. 이처럼 이벤트가 발생하면 암묵적으로 생성되는 이벤트 객체도 생성자 함수(Event, UIEvent, MouseEvent...)에 의해 생성된다.

<!DOCTYPE html>
<html>
<body>
  <script>
    // Event 생성자 함수를 호출하여 foo 이벤트 타입의 Event 객체를 생성한다.
    let e = new Event('foo');
    console.log(e);
    // Event {isTrusted: false, type: "foo", target: null, ...}
    console.log(e.type); // "foo"
    console.log(e instanceof Event); // true
    console.log(e instanceof Object); // true

    // FocusEvent 생성자 함수를 호출하여 focus 이벤트 타입의 FocusEvent 객체를 생성한다.
    e = new FocusEvent('focus');
    console.log(e);
    // FocusEvent {isTrusted: false, relatedTarget: null, view: null, ...}

    // MouseEvent 생성자 함수를 호출하여 click 이벤트 타입의 MouseEvent 객체를 생성한다.
    e = new MouseEvent('click');
    console.log(e);
    // MouseEvent {isTrusted: false, screenX: 0, screenY: 0, clientX: 0, ... }

    // KeyboardEvent 생성자 함수를 호출하여 keyup 이벤트 타입의 KeyboardEvent 객체를
    // 생성한다.
    e = new KeyboardEvent('keyup');
    console.log(e);
    // KeyboardEvent {isTrusted: false, key: "", code: "", ctrlKey: false, ...}

    // InputEvent 생성자 함수를 호출하여 change 이벤트 타입의 InputEvent 객체를 생성한다.
    e = new InputEvent('change');
    console.log(e);
    // InputEvent {isTrusted: false, data: null, inputType: "", ...}
  </script>
</body>
</html>

그리고 생성된 이벤트 객체는 생성자 함수와 더불어 생성되는 프로토타입으로 구성된 프로토타입 체인의 일원이된다.

이벤트 객체 중 일부는 사용자의 행위에 의해 생성된 것이고, 일부는 JS 코드에 의해 인위적으로 생성된 것이다.

ex) MouseEvent 타입의 이벤트 객체와 CustomEvent 타입의 이벤트 객체

Event 인터페이스는 DOM 내에서 발생한 이벤트에 의해 생성되는 이벤트 객체를 나타낸다.

<!DOCTYPE html>
<html>
<body>
  <input type="text">
  <input type="checkbox">
  <button>Click me!</button>
  <script>
    const $input = document.querySelector('input[type=text]');
    const $checkbox = document.querySelector('input[type=checkbox]');
    const $button = document.querySelector('button');

    // load 이벤트가 발생하면 Event 타입의 이벤트 객체가 생성된다.
    window.onload = console.log;

    // change 이벤트가 발생하면 Event 타입의 이벤트 객체가 생성된다.
    $checkbox.onchange = console.log;

    // focus 이벤트가 발생하면 FocusEvent 타입의 이벤트 객체가 생성된다.
    $input.onfocus = console.log;

    // input 이벤트가 발생하면 InputEvent 타입의 이벤트 객체가 생성된다.
    $input.oninput = console.log;

    // keyup 이벤트가 발생하면 KeyboardEvent 타입의 이벤트 객체가 생성된다.
    $input.onkeyup = console.log;

    // click 이벤트가 발생하면 MouseEvent 타입의 이벤트 객체가 생성된다.
    $button.onclick = console.log;
  </script>
</body>
</html>

Event 인터페이스에는 모든 이벤트 객체의 공통 프로퍼티가 정의되어 있고

FocusEvent, MouseEvent, KeyboardEvent, WheelEvent 같은 하위 인터페이스에는 이벤트 타입에 따라 고유한 프로퍼티가 정의되어 있다.

40.5.2 이벤트 객체의 공통 프로퍼티

Event 인터페이스, 즉 Event.prototype에 정의되어 있는 이벤트 관련 프로퍼티는 UIEvent, CustomEvent, MouseEvent 등 모든 파생 이벤트 객체에 상속된다.

즉, Event 인터페이스의 이벤트 관련 프로퍼티는 모든 이벤트 객체가 상속받는 공통 프로퍼티다.

40.5.3 마우스/키보드 정보 취득

Event 하위 인터페이스에는 이벤트 타입에 따라 고유한 프로퍼티가 정의되어 있다.

MouseEvent 타입의 이벤트 객체는 screenX/screenY, clientX/clientY, offsetX/offsetY 등의 프로퍼티를 갖고, KeyboardEvent 타입의 이벤트 객체는 altkey, ctrlKey, key, keyCode 등의 고유 프로퍼티를 갖는다.

40.6) 이벤트 전파

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파(Event Propagation)이라고 한다.

<body>
  <ul id="fruits">
    <li id="apple">Apple</li>
    <li id="banana">Banana</li>
    <li id="orange">Orange</li>
  </ul>
</body>

ul의 두 번째 자식인 li를 클릭하면 클릭 이벤트가 발생한다. 이때 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타겟을 중심으로 DOM 트리를 통해 전파된다.

이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분할 수 있다.

🧩 캡처링 단계(capturing phase): 이벤트가 상위 요소에서 하위 요소로 전파

🧩 타겟 단계(target phase): 이벤트가 이벤트 타겟에 도달

🧩 버블링 단계(bubbling phase): 이벤트가 하위 요소에서 상위 요소 방향으로 전파

이벤트 핸들러 어트리뷰트 및 프로퍼티 방식으로 등록한 이벤트 핸들러는 타겟 단계와 버블링 단계의 이벤트만 캐치할 수 있지만, addEventListener 메서드 방식으로 등록한 이벤트 핸들러는 캡처링 단계까지 캐치할 수 있다.

캡처링 단계 이벤트를 캐치하려면 addEventListener 메서드의 3번째 인수로 true를 전달하면 된다.

대부분의 이벤트는 캡처링과 버블링을 통해 전파되지만 다음의 이벤트는 버블링을 통해 전파되지 않는다. 즉, event.bubbles의 값이 모두 false다.

focus/blur (포커스 이벤트)
load/unload/abort/error (리소스 이벤트)
mouseenter/mouseleave (마우스 이벤트)

위 이벤트들은 버블링되지 않아 이벤트 타겟의 상위 요소에서 위 이벤트를 캐치하려면 캡처링 단계의 이벤트를 캐치해야 하지만, 버블링되는 이벤트로 위의 이벤트들을 대체할 수 있다.

포커스 이벤트는 focusin/focusout으로, 마우스 이벤트는 mouseover/mouseout으로 대체할 수 있다.

<!DOCTYPE html>
<html>
<body>
  <p>버블링과 캡처링 이벤트 <button>버튼</button></p>
  <script>
    // 버블링 단계의 이벤트 캐치
    document.body.addEventListener('click', () => {
    	console.log('Handler for body.');
    });
    
    // 캡처링 단계의 이벤트 캐치
    document.querySelector('p').addEventListener('click', () => {
    	console.log('Handler for paragraph.');
    }, true);
    
    // 버블링 단계의 이벤트 캐치
    document.querySelector('button').addEventListener('click', () => {
    	console.log('Handler for button.');
    });
  </script>
</body>
</html>
<!-- 출력
Handler for paragraph.
Handler for button.
Handler for body.
-->

body와 button은 버블링 단계의 이벤트만을 캐치하고 p는 캡처링 단계의 이벤트만 캐치한다.

이벤트는 캡처링 - 타겟 - 버블링 단계로 전파되기 때문에, button에서 클릭 이벤트가 발생하면 먼저 캡처링 단계를 캐치하는 p의 이벤트 핸들러가 호출되고, 그후 버블링 단계의 이벤트를 캐치하는 button과 body의 이벤트 핸들러가 호출된다.

만약 p에서 클릭 이벤트가 발생하면 캡처링 단계를 캐치하는 p의 이벤트 핸들러가 호출되고 버블링 단계를 캐치하는 body 의 이벤트 핸들러가 호출된다.

40.7) 이벤트 위임

이벤트 위임(event delegation)은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 것을 말한다.

이벤트 위임을 통해 상위 DOM 요소에 이벤트 핸들러를 등록하면 여러 개의 하위 DOM 요소에 이벤트 핸들러를 등록할 필요가 없다.

<!DOCTYPE html>
<html>
<body>
  <ul class="post-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
  </ul>
  <div class="msg" />
  <script>
    const msg = document.querySelector('.msg');
    const list = document.querySelector('.post-list')

    list.addEventListener('click', function (e) {
      console.log(e.target.id);
    });
  </script>
</body>
</html>

모든 li가 클릭 이벤트에 반응하는 처리를 구현하고 싶으면 모든 li에 이벤트 핸들러를 바인딩하면 총 4개의 이벤트 핸들러를 바인딩해야 하지만, 이벤트 위임을 통해 부모 요소에만 이벤트 핸들러를 바인딩하는 것이다.

이는 이벤트가 이벤트를 발생시킨 요소의 부모 요소에도 영향(버블링)을 미치기 때문에 가능하다.

40.8) DOM 요소의 기본 동작 조작

40.8.1 DOM 요소의 기본 동작 중단

<!DOCTYPE html>
<html>
<body>
  <a href="http://www.google.com">go</a>
  <script>
  document.querySelector('a').onclick = e => {
    // a 요소의 기본 동작을 중단한다.
    e.preventDefault();
  };
  </script>
</body>
</html>

DOM 요소는 저마다 기본 동작이 있어, a 요소를 클릭하면 href 속성에 지정된 링크로 이동하고 checkbox 요소를 클릭하면 체크되거나 해제된다.

이벤트 객체의 preventDefault() 메서드는 이러한 DOM 요소의 기본동작을 중단시킨다 !

40.8.2 이벤트 전파 방지

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <button class="btn1">Button 1</button>
    <button class="btn2">Button 2</button>
    <button class="btn3">Button 3</button>
  </div>
  <script>
    // 이벤트 위임. 클릭된 하위 버튼 요소의 color를 변경
    document.querySelector('.container').onclick = ({ target }) => {
      if(!target.matches('.container > button')) return;
      target.style.color = 'red';
    };
    
    document.querySelector('.btn2').onclick = e => {
      e.stopPropagation(); // 이벤트 전파 중단
      e.target.style.color = 'blue';
    };
  </script>
</body>
</html>

이벤트 객체의 stopPropagation() 메서드는 이벤트 전파를 중지시킨다.

상위 DOM 요소인 container에 이벤트를 위임해 하위 DOM 요소에서 발생한 클릭 이벤트를 상위 DOM 요소인 container가 캐치해 이벤트를 처리한다.

이때 하위 요소 중 btn2는 자체적으로 이벤트를 처리한다. btn2는 자신이 발생시킨 이벤트가 전파되는 것을 중단해 자신에게 바인딩된 이벤트 핸들러만 실행되도록 한다.

이렇게 stopPropagation 메서드는 하위 DOM 요소의 이벤트를 개별적으로 처리하기 위해 이벤트의 전파를 중단시킨다.

저작자표시

'HTML&CSS&Javascript > JS' 카테고리의 다른 글

[Javascript] 변수의 Type(원시형과 참조형) (0)	2023.03.22
[JS] 자바스크립트 배열의 slice()와 splice() 함수 (0)	2023.03.13
[JS Deep Dive] 40. Event (0)	2023.03.01
[JS Deep Dive] 39. DOM (0)	2023.03.01
[JS Deep Dive] 38. 브라우저의 렌더링 과정 (0)	2023.03.01

현재글[JS Deep Dive] 40. Event Part 2

WoohyunKing의 개발 성장일지

Github : https://github.com/WooHyunKing

dfs, JavaScript, softeer, Hackerrank, implementation, BFS, 백준, DynamicProgramming, Backtracking, Programmers, Python, Bruteforce, Greedy, Baekjoon, 구현, js, REACT, sorting, algorithm, dp,

Today :
Yesterday :

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

WoohyunKing의 개발 성장일지