이벤트 핸들러 등록 종류

이벤트 핸들러 등록 종류

1. 이벤트 핸들러 어트리뷰트 방식
   이벤트 핸들러 어트리뷰트의 이름은 onclick과 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있음
   주의할 점은 이벤트 핸들러 어트리뷰트 값으로 함수 참조가 아닌 함수 호출문 등의 문을 할당
   이때 '이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함 수 몸체를 의미'.

   하지만 HTML 과 자바스크립트는 관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋음.

    <button onclick="sayHi('Lee')">Click me!</button>
    <script>
        function sayHi(name) {
            console.log(`Hi! ${name}`);
        }
    </script>

2. 이벤트 핸들러 프로퍼티 방식
   window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는
   이벤트 핸들러 프로퍼티를 가지고 있음
   이벤트 핸들러 프로퍼티의 키는 이벤트 핸들러 어트리뷰트와 마찬가지로 onclick와 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있음
   이벤트 핸들러 프로퍼티 방식은 이벤트 핸들러 어트리뷰트 방식의 HTML과 자바스크립트가 뒤섞이는 문제를 해결할 수 있음.

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

    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');

        // 이벤트 핸들러 프로퍼티에 이벤트 핸들러 바인딩.

        // 이벤트 핸들러 프로퍼티 방식은 하나의 이벤트에 하나의 이벤트 핸들러만 바인딩 할 수 있음
        // 첫번째로 바인딩된 이벤트 핸들러는 두번째 바인딩된 이벤트 핸들러에 의해 재할당되어 실행되지 않음.
        btn.onclick = function () {
            console.log('button click 1');
        };
        btn.onclick = function () {
            console.log('button click 2'); // button 2 만 저장됨
        };
    </script>

3. addEventListener 메서드 방식
   DOM Level 2 에서 도입된 Event.prototype.addEventListener 메서드를 사용하여 이벤트 핸들러를 등록할 수 있음
   앞서 살펴본 이벤트 핸들러 어트리뷰트 방식 과 이벤트 핸들러 프로퍼티 방식은 DOM Level 0 부터 제공되던 방식.

   addEventListener 메서드의 첫번째 매개변수에는 이벤트의 종류를 나타내는 문자열인 이벤트 타입을 전달
   이때 이벤트 핸들러 프로퍼티 방식과는 달리 on 접두사를 붙이지 않음
   두번째 매개변수에는 이벤트 핸들러를 전달

<button>Click me!</button>
    <script>
        const btn = document.querySelector('button');

        btn.addEventListener('click', function() {
           
           console.log('button click');
        })
    </script>