Event 객체

현우.·2024년 7월 16일

JS&browser

JS&Browser

목록 보기

7/9

Event 객체

이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 객체
이벤트가 발생하면 동적으로 생성되며 이벤트 핸들러의 인자로 들어간다.

Event property

Event.target

실제로 이벤트를 발생시킨 요소

Event.currentTarget

이벤트에 바인딩된 DOM 요소. 즉 addEventListenr 앞에 기술된 객체를 가리킨다.

addEventListener 콜백함수 내의 this는 이벤트에 바인딩된 DOM요소를 가리킨다고 했다.
따라서 currentTarget은 이벤트 핸들러의 콜백함수내의 this와 항상 일치한다.

코드📄

<body>
    <div class="container">
      <button id="btn1">Hide me 1</button>
      <button id="btn2">Hide me 2</button>
    </div>
  
    <script>
      const container = document.querySelector('.container');
  
      function hide(e){
        e.target.style.visibility = 'hidden';
        if(e.currentTarget === e.target)
            console.log('You Clicked container');
        else
            console.log('You Clicked btn');

        if(e.target===this)
            console.log('same');
        else
            console.log('different');
      }
  
      container.addEventListener('click', hide); // 이벤트 위임으로 버튼
    </script>
  </body>

container 부분 클릭시

button 클릭시

Event delegation

이벤트 위임이란 다수의 자식 요소에 모두 이벤트 핸들러를 바인딩하는 대신 하나의 부모 요소에 이벤트 핸들러를 바인딩 하는 방법이다.

여러번 바인딩 해줄 필요 없이 한번만 하여 코드가 간소화 된다.
이벤트가 이벤트 흐름에 의해 이벤트를 발생시킨 요소의 부모 요소에도 영향을 미치기 때문(버블링)이다.

Event.eventPhase

이벤트 흐름상에서 어느단계에 있는지 반환
0 : 이벤트 없음 / 1 : 캡처링 단계 / 2 : 타깃 / 3 : 버블링 단계

Event.type

발생한 이벤트의 종류 반환

Event.keyCode

발생 이벤트의 키 번호 반환
키보드와 관련된 이벤트 발생시 사용한다.

Event.preventDeault()

이벤트의 기본 동작을 중단시킨다.

form을 submit하거나 링크를 클릭할때의 이벤트 동작 중단
그러나 버튼클릭같이 active event listener가 아닌 마우스 wheel을 이용한 이벤트처럼 passive event listener는 빠르게 동작해야하기 때문에 preventDefault는 무시된다.
이벤트 핸들러의 옵션에서 passive를 false로 두어 active하게 사용할 수 있지만 변경하지 않는 것이 좋다고 한다.

코드📄

<body>
    <div class="container">
     <a href="https://google.com">google</a>
    </div>
  
    <script>
      const a =document.querySelector('a');

      a.addEventListener('click',(event)=>{
        event.preventDefault();
        console.log(event.type); // click
      })
    </script>
  </body>

링크를 클릭해도 해당 링크로 넘어가는 것을 막는다.

Event.stopPropagation()

한 요소의 이벤트가 처리된후 그 이벤트가 부모 요소로 전달되는 것(버블링)을 중단 시키는 메소드

코드📄

<body>
    <p>버튼을 클릭하면 이벤트 전파를 중단한다. <button>버튼</button></p>
    <script>
      const body = document.querySelector('body');
      const para = document.querySelector('p');
      const button = document.querySelector('button');
  
  
      body.addEventListener('click', function () {
        console.log('Handler for body.');
      });
  

      para.addEventListener('click', function () {
        console.log('Handler for paragraph.');
      });
      
      button.addEventListener('click', function (event) {
        console.log('Handler for button.');
  
        // 이벤트 전파를 중단한다.
        event.stopPropagation();
      });
    </script>
  </body>