[Deep Dive] Event(1)

link717·2021년 9월 13일

Deep Dive

목록 보기

26/28

🌼 Event

브라우저는 처리해야 할 특정 사건(event)이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이벤트에 대해 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다.

이벤트 핸들러: 이벤트가 발생됐을 때 호출되는 함수
이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것

🌼 40.3 이벤트 핸들러 등록

이벤트 핸들러 어트리뷰트: 이벤트 핸들러 어트리뷰트 이름은 이벤트 앞에 on 접두사를 붙힌 형태이다. 이벤트 핸들러의 어트리뷰트 값으로 함수 호출문을 할당하면 이벤트 핸들러가 등록되는데 이벤트 핸들러의 값으로 함수 참조가 아닌 함수 호출문을 할당한다는 점을 주의해야 한다.
- 이벤트 핸들러의 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다.
- 이벤트 핸들러 어트리뷰트 방식을 알아두는 것은 좋으나 HTML과 자바 스크립트 코드는 분리하는 것이 좋다.
- 최근에 사용되는 Vue, React, Angular와 같은 프레임워크/라이브러리에서 적용되는 CBD(Component Based Development) 방식에서는 이벤트 핸들러 어트리뷰트 방식으로 이벤트를 처리한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="sayHi('hello')">Click me!</button>
    //아래의 onclick 어트리뷰트는 파싱되어 다음과 같은 함수를 암묵적으로 생성한다.
    //function onclick(event) {
    //  console.log('hello');
    //  console.log('world');
    //}
    <button onclick="console.log('hello'); console.log('world');">Click me!</button>
    <script>
      function sayHi(name) {
        console.log(`${name} world!`);
      }
    </script>
  </body>
</html>

이벤트 핸들러 프로퍼티: window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 갖고 있는데 해당 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다.
- 이벤트 핸들러는 대부분 이벤트를 발생시킬 이벤트 타깃에 바인딩 하지만 간혹 전파된 이벤트를 캐치할 DOM노드 객체에 바인딩 하기도 한다.
- 이벤트 핸들러 어트리뷰트와 다르게 HTML과 자바스크립트가 섞이는 문제를 해결할 수 있다.
- 이벤트 핸들러 프로퍼티에는 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button>Click me!</button>
    <script>
      //$button은 이벤트 타깃이다.
      const $button = document.querySelector("button");

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

      // 두 번째로 바인딩된 이벤트 핸들러만 동작된다.
      $button.onclick = function () {
        console.log("second");
      };
    </script>
  </body>
</html>

addEventListener 메서드: 이벤트 핸들러 프로퍼티와 다르게 addEventListener 메서드는 자바스크립트의 publish-subsribe pattern을 통해 동일한 이벤트 타입에 여러개의 이벤트를 핸들러를 등록할 수 있다. 실행은 등록된 순서대로이다.

  EventTarget.addEventListener('eventType', eventHandler [, useCapture]);
  
  . EventTarget: 이벤트 발생을 감시할 요소 노드
  . 'eventType': on 접두사를 제외한 이벤트 타입명
  . eventHandler: 이벤트 발생시 브라우저에게 위이함 이벤트 핸들러
  . useCapture: ture(capturing 사용), false(bubbling 사용 : 기본값)

🌼 40.4 이벤트 핸들러 제거

removeEventListener: addEventListener를 통해 전달된 인수를 removeEventListener에 빠짐없이 전달해야 이벤트 핸들러가 제거된다. 또한 무명함수를 핸들러로 등록할 경우 제거할 수 없으니 핸들러의 참조를 변수나 자료구조에 저장하고 있어야 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button>Click me!</button>
    <script>
      const $button = document.querySelector("button");

      const handleClick = function () {
        console.log("click!");
      };

      $button.addEventListener("click", handleClick, true);
      
      // 이벤트 핸들러를 할당할 때 전달했던 인수를 그대로 전달하지 않으면 제거되지 않는다.
      $button.removeEventListener("click", handleClick);
      // 여기서 제대로 이벤트 핸들러가 제거된다.
      $button.removeEventListener("click", handleClick, true);
    </script>
  </body>
</html>

출처: 모던 자바 스크립트 Deep Dive-이웅모

link717

Turtle Never stop

이전 포스트

[Deep Dive] DOM(3)

다음 포스트

[Deep Dive] Event(1)

Deep Dive

🌼 Event

🌼 40.3 이벤트 핸들러 등록

🌼 40.4 이벤트 핸들러 제거

[Deep Dive] DOM(3)

[Deep Dive] Event(2)

0개의 댓글