Space
article thumbnail
Published 2023. 6. 15. 11:54
[JS] Event (2) JavaScript
반응형

이벤트 핸들러 등록

이벤트 핸들러 프로퍼티 방식


addEventListener 메서드 방식

<!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 메서드는 동일한 요소에서 발생한 동일한 이벤트에 대해 -->
<!-- 하나 이상의 이벤트 핸들러를 등록할 수 있다. -->

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

    $button.addEventListener('click', function () {
        console.log('[1]button click');
    });
    
    $button.addEventListener('click', function () {
        console.log('[2]button click');
    });
  </script>
</body>
</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>

 

동일한 HTML 요소에서 발생한 동일한 이벤트에 대해

이벤트 핸들러 프로퍼티 방식은 하나 이상의 이벤트 핸들러를 등록할 수 없지만,

 

addEventListener 메서드 방식은 하나 이상의 이벤트 핸들러를 등록할 수 있고,

이때 이벤트 핸들러는 등록된 순서대로 호출된다.

 

단, addEventListener 메서드를 통해 참조가 동일한 이벤트 핸들러를 중복 등록하면

하나의 이벤트 핸들러만 등록된다.

 

반응형

이벤트 핸들러 제거

이벤트 핸들러 프로퍼티 방식

<!-- removeEventListener 메서드로 이벤트 핸들러 프로퍼티 방식으로 등록한 -->
<!-- 이벤트 핸들러를 제거할 수 없다. -->

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

<!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 메서드 방식

<!-- removeEventListener -->
<!-- addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 -->
<!-- 전달한 인수가 일치하면 이벤트 핸들러가 제거된다. -->

<!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.removeEventListener('click', handleClick, true);  // 실패
    $button.removeEventListener('click', handleClick);        // 성공
  </script>
</body>
</html>

이벤트 객체

 

이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다.

 

생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 매개변수로 전달된다.

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

<!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>
<!-- 이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록한 경우 -->
<!-- event가 아닌 다른 이름으로는 이벤트 객체를 전달받지 못한다. -->

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body { height: 100%; }
  </style>
</head>
<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>

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

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

// type
이벤트 타입

// target
이벤트를 발생시킨 DOM 요소

// currentTarget
이벤트 핸들러가 바인딩된 DOM 요소

// eventPhase
이벤트 전파 단계
0 : 이벤트 없음 / 1 : 캡처링 / 2 : 타겟 / 3 : 버블링

// bubbles
이벤트를 버블링으로 전파하는지 여부
다음 이벤트는 bubbles: false로 버블링하지 않는다.
  - 포커스 이벤트 : focus / blur
  - 리소스 이벤트 : load / unload / abort / error
  - 마우스 이벤트 : mouseenter / mouseleave
  
// cancelable
preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있는지 여부
다음 이벤트는 cancelable: false로 취소할 수 없다.
  - 포커스 이벤트 : focus / blur
  - 리소스 이벤트 : load / unload / abort / error
  - 마우스 이벤트 : dblclick / mouseenter / mouseleave
  
// defaultPrevented
preventDefault 메서드를 호출하여 이벤트를 취소했는지 여부

// isTrusted
사용자의 행위에 의해 발생한 이벤트인지 여부
예를 들어, click 메서드 또는 dispatchEvent 메서드를 통해 인위적으로 발생시킨 이벤트인 경우
isTrusted는 false 이다.

// timeStamp
이벤트가 발생한 시각(1970/01/01/00:00:0부터 경과한 밀리초)
// e.target은 change 이벤트를 발생시킨 DOM 요소인 $checkbox를 가리키고,
// e.currentTarget은 이벤트 핸들러가 바인딩된 DOM 요소 $checkbox를 가리킨다.

$checkbox.onchange = e => {
    console.log(e.target === e.currentTarget);  // true
}

 

 

Event (2) 알아보는 시간이었습니다.

틀린 내용은 댓글로 알려주시면 감사하겠습니다.

 

 

반응형
profile

Space

@Space_zero

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!