HTML&CSS&Javascript/JS

[JS Deep Dive] 40. Event

킹우현 2023. 3. 1. 22:36

40.1) Event Driven Programming

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 특정한 타입의 이벤트를 발생시킨다.

ex) 클릭, 키보드 입력, 마우스 이동 등

 

만약에 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려서 호출을 위임하는데, 이때 '이벤트가 발생했을 때 호출될 함수'를 이벤트 핸들러(Event Handler)라고 하고,

이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다.

 

즉, 함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는 것이다.

 

Window, Document, HTMLElement 타입의 객체는 onclick과 같이 특정 이벤트에 대응하는 다양한 이벤트 핸들러 프로퍼티를 가지고 있다.

이 이벤트 핸들러 프로퍼티에 함수를 할당하면 해당 이벤트가 발생했을 때 할당된 함수가 브라우저에 의해 호출된다.

⇒ 이처럼 이벤트와 그에 대응하는 함수인 이벤트 핸들러를 통해 사용자와 애플리케이션은 ‘상호작용(Interaction)’을 할 수 있다 !

⇒ 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 Event driven programming이라고 한다.

40.2) Event Type

이벤트 타입은 이벤트의 종류를 나타내는 문자열이다.

  • 마우스 이벤트 : click, dblclick, mousedown, mouseup ..
  • 키보드 이벤트 : keydown, keypress, keyup
  • 포커스 이벤트 : focus, blur
  • 폼 이벤트 : submit, reset
  • 값 변경 이벤트 : input, change, readystatechange
  • DOM 뮤테이션 이벤트 : DOMContentLoaded
  • 뷰 이벤트 : resize, scroll
  • 리소스 이벤트 : load, unload, abort, error

40.3) Event Handler 등록

40.3.1 Event Handler Attribute 방식

HTML 요소의 어트리뷰트 중에서는 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다.

이벤트 핸들러 어트리뷰트는 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져있다.

 

주의할 점은 이벤트 핸들러 어트리뷰트 값으로 함수 참조가 아닌 “함수 호출문 등의 문을 할당한다는 것”이다. ⭐️

(이벤트 핸들러 프로퍼티 방식은 DOM 노드의 이벤트 핸들러 프로퍼티에 함수 참조를 할당)

 

이벤트 핸들러를 등록할 때 콜백 함수와 마찬가지로 ‘함수 참조’를 등록해야 브라우저가 이벤트 핸들러를 호출할 수 있다.

만약에 함수 참조가 아니라 함수 호출문을 등록하면 함수 호출문의 결과가 이벤트 핸들러로 등록된다.

 

하지만 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다.

결국 이벤트 핸들러 어트리뷰트 값으로 할당한 문자열은 암묵적으로 생성되는 이벤트 핸들러의 함수 몸체다.

 

따라서 이벤트 핸들러 어트리뷰트 값으로 여러 가지의 문을 할당할 수 있다.

 

HTML과 JS의 역할은 분리하는 것이 좋기 때문에 이벤트 핸들러 어트리뷰트 방식은 더 이상 사용하지 않는 것이 좋다 !

하지만 모던 JS에서는 이벤트 핸들러 어트리뷰트 방식을 사용하는 경우가 있다.(React/Angular/Vue.js와 같은 프레임워크 및 라이브러리)

 

40.3.2 Event Handler Property 방식

window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있다.

 

이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다.

이벤트 핸들러를 등록하기 위해서는 이벤트를 발생시킬 객체인 ‘Event Target’과 이벤트의 종류를 나타내는 문자열인 ‘Event Type’, 그리고 ‘Event Handler’를 지정할 필요가 있다.

 

이벤트 핸들러는 대부분 이벤트를 발생시킬 이벤트 타깃에 바인딩한다. 하지만 반드시 이벤트 타깃에 이벤트 핸들러를 바인딩해야 하는 것은 아니다.

 

앞서 살펴본 이벤트 핸들러 어트리뷰트 방식도 결국 DOM 노드 객체의 이벤트 핸들러 프로퍼티로 변환되므로 결과적으로 이벤트 핸들러 프로퍼티 방식과 동일하다고 할 수 있다 !

 

이벤트 핸들러 프로퍼티 방식은 어트리뷰트 방식과 같이 HTML과 JS가 뒤섞이는 문제를 해결할 수 있다.

(하지만 이벤트 핸들러 프로퍼티에 1개의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있다.)

 

40.3.3 addEventListener 메소드 방식 ⭐️

addEventListener 메소드의 첫 번째 매개변수에는 이벤트의 종류를 나타내는 문자열인 ‘Event Type’을 전달하고(이때, 프로퍼티방식과 달리 on 접두사를 붙이지 X), 두 번째 매개변수에는 ‘Event Handler’를 전달한다.

<!DOCTYPE html>
<html>
<body>
  <button>Click me!</button>
  <script>
    const $button = document.querySelector('button');

    // 이벤트 핸들러 프로퍼티 방식
    // $button.onclick = function () {
    //   console.log('button click');
    // };

    // addEventListener 메서드 방식
    $button.addEventListener('click', function () {
      console.log('button click');
    });
  </script>
</body>
</html>

⇒ 이벤트 핸들러 프로퍼티 방식은 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩하지만 addEventListener 메서드에는 이벤트 핸들러를 “인수로 전달”한다 !

  • addEventListener 메서드 방식은 이벤트 핸들러 프로퍼티에 바인딩된 이벤트 핸들러에 아무런 영향을 주지 않는다. 따라서 버튼 요소에서 클릭 이벤트가 발생하면 2개의 이벤트 핸들러가 모두 호출된다.
  • 동일한 HTML 요소에 addEventListener를 이용하여 하나 이상의 이벤트 핸들러를 등록할 수 있다. 이때 이벤트 핸들러는 등록된 순서대로 호출된다. 
```jsx
<!DOCTYPE html>
<html>
<body>
  <button>Click me!</button>
  <script>
    const $button = document.querySelector('button');

    // addEventListener 메서드는 동일한 요소에서 발생한 동일한 이벤트에 대해
    // 하나 이상의 이벤트 핸들러를 등록할 수 있다.
    $button.addEventListener('click', function () {
      console.log('[1]button click');
    });

    $button.addEventListener('click', function () {
      console.log('[2]button click');
    });
  </script>
</body>
</html>
```
  • 단, addEventListener 메서드를 통해 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록된다.
    ```html
    <!DOCTYPE html>
    <html>
    <body>
      <button>Click me!</button>
      <script>
        const $button = document.querySelector('button');
    
        const handleClick = () => console.log('button click');
    
        // 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 핸들러만 등록된다.
        $button.addEventListener('click', handleClick);
        $button.addEventListener('click', handleClick);
      </script>
    </body>
    </html>
    ```

40.4) Event Handler 제거

<!DOCTYPE html>
<html>
<body>
  <button>Click me!</button>
  <script>
    const $button = document.querySelector('button');

    const handleClick = () => console.log('button click');

    // 이벤트 핸들러 등록
    $button.addEventListener('click', handleClick);

    // 이벤트 핸들러 제거
    // addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에
    // 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않는다.
    $button.removeEventListener('click', handleClick, true); // 실패
    $button.removeEventListener('click', handleClick); // 성공
  </script>
</body>
</html>

addEventListener로 등록한 이벤트 핸들러를 제거하려면 EventTarget.prototype.removeEventListener 메서드를 사용한다.

 

단, addEvenetListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않는다.

⇒ 따라서 익명 함수를 이벤트 핸들러로 등록한 경우 제거할 수 없다.

<!DOCTYPE html>
<html>
<body>
  <button>Click me!</button>
  <script>
    const $button = document.querySelector('button');

    const handleClick = () => console.log('button click');

    // 이벤트 핸들러 프로퍼티 방식으로 이벤트 핸들러 등록
    $button.onclick = handleClick;

    // removeEventListener 메서드로 이벤트 핸들러를 제거할 수 없다.
    $button.removeEventListener('click', handleClick);

    // 이벤트 핸들러 프로퍼티에 null을 할당하여 이벤트 핸들러를 제거한다.
    $button.onclick = null;
  </script>
</body>
</html>

이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러는 removeEventListener로 제거할 수 없다.

이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러를 제거하려면 이벤트 핸들러 프로퍼티에 null을 할당한다.

저작자표시

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

[JS] 자바스크립트 배열의 slice()와 splice() 함수  (0) 2023.03.13
[JS Deep Dive] 40. Event Part 2  (0) 2023.03.06
[JS Deep Dive] 39. DOM  (0) 2023.03.01
[JS Deep Dive] 38. 브라우저의 렌더링 과정  (0) 2023.03.01
SPA(Single Page Application)의 개념과 장단점  (0) 2023.02.13

'HTML&CSS&Javascript/JS'의 다른글

  • 현재글[JS Deep Dive] 40. Event

관련글

티스토리툴바