📃 자바스크립트 이벤트

💡 이벤트란?

1. 이벤트는 일반적으로 함수에 연결된다.
2. 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다.
3. 이 함수를 이벤트 핸들러라고 하며 이벤트에 대응하는 처리를 기술한다.

---

💡 이벤트 종류

🖱️ Mouse Event

사용자가 마우스나 터치화면을 사용할 때 발생

💻 UI Event

사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 발생

⌨️ KeyBoard Event

사용자가 키보드를 이용할 때 발생

🎯 Focus Event

사용자가 대상 요소로 포커스를 이동하면 이벤트가 발생

📃 Form Event

HTML 폼 요소(form element)에서 이벤트가 발생

---

💡 이벤트 핸들러 사용 방법

1. inline 방식

• 이벤트 대상의 태그 속성으로 지정한다.

  // 버튼을 클릭했을 때 '렛츠고우 이벤트'를 경고창으로 출력
  <input type="button" onclick="alert('렛츠고우 이벤트');" value="button" />

  // 이벤트가 발생한 대상을 필요로 하는 경우 this를 통해서 참조 가능
  <input type="button" onclick="alert('렛츠고우 이벤트, ' + this.value);" value="button" />

  <button onclick="handler1(); handler2();">Click 💜</button>

  // script 탭에서 함수를 만들고, 태그에 지정하는 방식
  <script>
    function handler1() {
    alert('handler1');
    }
    function handler2() {
    alert('handler2');
    }
  </script>

2. 프로퍼티 방식

• 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록한다.

• 인라인 방식에 비해 HTML과 JavaScript를 분리할 수 있어 선호되는 방식이지만, addEventListener 방식을 추천한다.

• 오직 하나의 이벤트 핸들러만을 바인딩이 가능하다.

  <button class="btn">Click 💜</button>

  <script>
    const btn = document.querySelector('.btn');

    // 이벤트 핸들러 프로퍼티 방식은 이벤트에 하나의 이벤트 핸들러만 바인딩 가능
    // 첫번째 바인딩된 이벤트 핸들러 => 실행 NO
    btn.onclick = function () {
    alert('💚 Button clicked');
    };

    // 두번째 바인딩된 이벤트 핸들러 (🧡이 실행결과)
    btn.onclick = function () {
    alert('🧡 Button clicked');
    };
  </script>

3. addEventListener 방식

• 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때, 실행될 콜백 함수 ( 이벤트 핸들러 ) 를 지정한다.

   1) 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러 추가 가능
   2) 캡처링과 버블링 지원
   3) HTML 요소뿐만 아니라 모든 DOM 요소 (HTML, XML, SVG)에 동작
   4) 브라우저는 웹 문서 (HTML, XML, SVG)를 로드한 뒤, 파싱해 DOM을 생성

  <input type="button" id="target" value="button" />

  <script>
    const tg = document.getElementById('target');
    tg.addEventListener('click', function (event) {
    alert('무하하 지금은 새벽 🌝🌞, ' + event.target.value);
    });
  </script>

  <input type="button" id="target1" value="button💚" />
  <input type="button" id="target2" value="button🧡" />

  <script>
    const tg1 = document.getElementById('target1');
    const tg2 = document.getElementById('target2');
    function btn_listener(event) {
      switch (event.target.id) {
        case 'target1':
          alert('💚');
          break;
        case 'target2':
          alert('🧡');
          break;
      }
    }
    // btn_listener()로 쓰면 return 값을 받게 됨 = 💚
    tg1.addEventListener('click', btn_listener);
    // btn_listener()를 쓰려면 문자열로 감싸야 함 = 🧡
    tg2.addEventListener('click', 'btn_listener()'); 
  </script> 

---

💡 이벤트 핸들러 내부의 this 사용

1. 인라인 이벤트 핸들러 방식

• 이벤트 핸들러는 일반 함수로서 호출되기에 이벤트 핸들러 내부 this는 전역 객체 window를 가리킨다.

  <button onclick="foo()">Button ❤️</button>

  <script>
    function foo() {
    console.log(this); // window
    }
  </script>

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

• 이벤트 핸들러는 메서드이기에 이벤트 핸들러 내부 this는 이벤트에 바인딩된 요소를 가리킨다.
  ( = 이벤트 객체의 currentTarget 프로퍼티 )

  <button class="btn">Button ❤️</button>

  <script>
    const btn = document.querySelector('.btn');

    btn.onclick = function (e) {
      console.log(this); // <button class="btn">Button</button>
      console.log(e.currentTarget); // <button class="btn">Button</button>
      console.log(this === e.currentTarget); // true
      };
  </script>

3. addEventListener 방식

• 콜백 함수지만, 이벤트 핸들러 내부 this는 이벤트 리스너에 바인딩된 요소를 가리킨다.
  ( = 이벤트 객체의 currentTarget 프로퍼티 )

  <button class="btn">Button ❤️</button>

  <script>
    const btn = document.querySelector('.btn');

    btn.addEventListener('click', function (e) {
      console.log(this); // <button class="btn">Button</button>
      console.log(e.currentTarget); // <button class="btn">Button</button>
      console.log(this === e.currentTarget); // true
      };
  </script>