JavaScript - Event 객체 (event.target)

이벤트가 발생하게 되면 발생된 이벤트에 대한 정보를 가지고 있는 객체

 

CSS 소스

<style>
    button {
        width: 200px;
        height: 100px;
        color: cadetblue;
        background: bisque;
        border: 2px solid black;
        font-size: 25px;
    }
</style>

 

HTML 소스

<h2>이벤트 객체</h2>
<button id="btn1">시작</button>
<button id="btn2">중지</button>

 

스크립트

<script>
    // 모든 button을 찾아 유사배열객체로 반환
    var btns = document.querySelectorAll("button");

    for (var i = 0; i < btns.length; i++) {
        // 익명함수를 등록해서 바로 실행
        // 콜백함수의 첫번째 매개변수에 이벤트 객체 정보를 받을 수 있다.
        // 매개변수로 받지 않을 경우 window.event로 받을 수 있음
        btns[i].onclick = function (e) {
            // 이벤트 발생 객체를 e를 통해서 얻기
            var obj = e.target; // 클릭 이벤트가 발생한 버튼 객체
            console.log("이벤트객체 innerHTML : ", obj.innerHTML);
            console.log("this innerHTML : ", this.innerHTML);

            // 좌표 정보 확인하기
            // 이벤트가 발생한 객체의 좌표 정보 확인
            // offset으로 시작 : 이벤트 발생 객체와 연관되어 있다.
            
            // 이벤트 발생객체인 버튼의 좌표위치
            console.log("브라우저에서의 위치 : ", obj.offsetLeft, obj.offsetTop);
            // 이벤트 발생 객체와 클릭한 위치와의 차이
            console.log("이벤트 객체에서의 위치 : ", e.offsetX, e.offsetY);
        };
    }
</script>

 

결과