[JavaScript] 이벤트 콜백 함수 와 this

< this 와 바인딩되는 객체 >

* html 태그의 onclick="" 에 연결된 함수의 this는 전역객체[window]와 바인딩된다.
    this = window
    event.currentTarget = 클릭된 태그


* 이벤트 핸들러의 this는 그 요소 자체를 가르킨다. (전역객체[window]가 아니다)
       
    Event.currentTarget과 this는 언제나 일치한다.

    Event.target은 this와 반드시 일치하지는 않는다.
        - '이벤트 위임'에서 하부요소와 일치하는 것은 Event.target이다
            Event.currentTarget(=this)은 이벤트 함수가 설정된 상부요소와 바인딩된다

//====================================================

// 예제

<button id="btn1" style="color: blue;" onclick="func_btn3();"> 버튼 1 </button>

    <script>
       
        function func_btn3() {           
            //onclick에 연결된 경우 , 다른 함수가 연결되면 실행 안됨
            //주의!!!   this는 전역객체를 가르킴
            console.log("func_btn3", val1, this.val1 );
            console.log(this); // window
            var cur = event.currentTarget;
            console.log(event.currentTarget, cur.style.color, event.target.style.color); //버튼
        }

        var btn2 = document.getElementById('btn1');

        // 전통적 DOM Event Handler 방식은 이벤트 핸들러에 하나의 함수만을 바인딩할 수 있다
        // 첫번째 바인딩된 이벤트 핸들러 => 실행되지 않는다.
        btn2.onclick = function () {
            console.log('Button clicked 1', val1, this.val1 );//뒤에 또 정의가 되면 여기는 실행 안됨
        };

        // 두번째 바인딩된 이벤트 핸들러
        btn2.onclick = function () {
            console.log('Button clicked 2', val1, this.val1 );//실행됨
        };

        // DOM Level 2 Event Listener
        // 첫번째 바인딩된 이벤트 핸들러
        btn2.addEventListener('click', function () {
            //this = event.currentTarget
            console.log('Button clicked 3', val1, this.val1 );//실행됨    
            var cur = event.currentTarget;      
            console.log(event.currentTarget, cur.style.color, event.target.style.color); //버튼
        });

        // 두번째 바인딩된 이벤트 핸들러
        btn2.addEventListener('click', function () {
            console.log('Button clicked 4', val1, this.val1 );//실행됨
        });



        //================================================
        //이벤트 위임의 예
    <ul id="parent-list">
        <li id="post-1">Item 1</li>
        <li id="post-2">Item 2</li>
        <li id="post-3">Item 3</li>
    </ul>

    <script>
        //이벤트 위임
        //상위 노드에 이벤트 설정
        document.getElementById("parent-list").addEventListener("click", function (e) {
            console.log(this, e.target, e.currentTarget, e.type);
            //this 와 e.currentTarget 은 <ul>과 바인딩
            //e.target 은 클릭된 <li>와 바인딩
            if (e.target && e.target.nodeName == "LI") {
                console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
                e.target.innerHTML = e.target.id + " - clicked";
            }
        });
    </script>



//====================
* 객체의 속성 제어

this.innerHTML
this.style.color
event.target.innerHTML
event.target.id



//==================
이벤트 속성

https://developer.mozilla.org/ko/docs/Web/API/Event

Event Object
https://www.w3schools.com/jsref/obj_event.asp

HTML DOM Events
https://www.w3schools.com/jsref/dom_obj_event.asp
    - keycode 관련 내용


//=========
* Event.type
    - 이벤트 이름의 문자열
    - click 이벤트인 경우 "click" 문자열을 반환

* Event.keycode : 키 관련 이벤트에서 키 코드

* Event.eventPhase
이벤트 흐름(event flow) 상에서 어느 단계(event phase)에 있는지를 반환
반환값     의미
0     이벤트 없음
1     캡쳐링 단계
2     타깃
3     버블링 단계


//=====
//참고
https://poiemaweb.com/js-event