이벤트(Event)

1. 이벤트

자바스크립트에서 이벤트(event)는 사용자와 웹 페이지 간의 상호 작용을 처리하거나 웹 페이지의 상태 변화를 감지하는 데 사용됩니다. 이벤트는 특정 동작이나 조건이 충족될 때 발생하며, 자바스크립트를 사용하여 이벤트를 감지하고 처리할 수 있습니다. 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델입니다. (동기식이면 이벤트가 발생하는 차례대로 처리, 비동기는 별도로 작업이 진행됨.) 모든 os에는 이벤트가 만들어 있지만 그 이벤트에 대한 프로그래밍을 해줘야 동작합니다. 자바스크립트에서 이벤트는 웹 애플리케이션을 상호 작용적이고 동적으로 만드는 데 핵심적인 역할을 합니다. 이벤트는 클릭, 마우스 이동, 키보드 입력, 데이터 전송, 타이머 및 기타 다양한 상황에서 발생할 수 있으며, 웹 페이지의 동작을 사용자에게 반응적으로 만드는 데 도움이 됩니다.

    <input type= 'button'  onclick  =  'sendIt()' value='확인'>
                 --------  --------    ---------
               이벤트타겟  이벤트타입  이벤트리스너

    이벤트 타겟 = 이벤트가 발생하는 대상
    이벤트 타입 = 어떤 이벤트가 발생했는지
    이벤트 리스너 = 이벤트 발생할때 뭘 해줄지

(1) 이벤트 타겟
- 이벤트가 일어날 객체, 이벤트가 발생하는 대상

(2) 이벤트 타입
- 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명(event name)이라고도 함
- 키보드, 마우스, HTML DOM, window 객체... 등을 처리하는 이벤트를 제공
https://developer.mozilla.org/ko/docs/Web/API/Event/type

 

(3) 이벤트 리스너(Event Listener, handler)
- 이벤트가 발생했을때 그 처리를 하는 함수
- 지정된 타입의 이벤트가 특정 요소에서 발생하게 되면 웹 브라우저는 그 요소에 등록된 이벤트리스너를 실행

✔️이벤트 등록과 제거

    이벤트 등록
    객체.addEventListener(이벤트타입, 이벤트리스너)
    //html에서 이벤트줄때는 on붙이고 자바스크립트에서 이벤트를 줄때는 on뺌(onclick <=> click)
    
    이벤트 제거
    객체.removeEventListener(이벤트타입, 이벤트리스너)

2. 이벤트 객체

이벤트 객체(Event Object)는 자바스크립트에서 특정 종류의 이벤트와 관련된 정보를 저장하는 객체입니다. 이 객체는 해당 이벤트 유형에 대한 상세한 정보를 제공하며, 이벤트가 발생한 HTML 요소에 대한 정보도 포함하고 있습니다. 이벤트 객체는 이벤트가 발생할 때 자동으로 생성되며, 이벤트 핸들러 함수가 호출될 때 인수로 전달됩니다. 이를 통해 개발자는 이벤트와 관련된 정보를 확인하고 해당 정보를 기반으로 원하는 작업을 수행할 수 있습니다.
모든 이벤트 객체는 type 및 target 프로퍼티를 가지고 있습니다. type 프로퍼티는 이벤트의 종류(예: "click", "keydown", "mouseover")를 나타내고, target 프로퍼티는 이벤트가 발생한 HTML 요소를 가리킵니다.

    <input type='button' onclick=sendIt()' value='완료'>

    매개변수 없이 호출했지만 함수생성시 매개변수가 들어가면 이벤트객체가 만들어짐

    function sendIt(e){
        e.target : button
        e.type : click
    }

        // HTML
        // <button type="button" id="btn" value="확인">확인</button>
        
        window.onload = function(){
            const btn = document.getElementById('btn')
            btn.addEventListener('click',clickBtn)

        }

        function clickBtn(e){
            console.log(e) 
            // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
            
            console.log(e.target)  
            // <button type="button" id="btn" value="확인">확인</button>
            
            console.log(e.target.id) // btn
            console.log(e.target.value) // 확인
            console.log(e.type)  // click
        }

[문제] 버튼을 아래와 같이 만들고 각 버튼을 누르면 콘솔에 출력하는 문서를 만들어보자
단, 이벤트 객체를 이용하여 버튼을 구별함
- 버튼1클릭 -> 버튼1이 눌렸어요
- 버튼2클릭 -> 버튼2이 눌렸어요

<button type="button" id="btn1" value="버튼 1">버튼1</button>
<button type="button" id="btn2" value="버튼 2">버튼2</button>

        window.onload = function(){
            const btn1 = document.getElementById('btn1')
            const btn2 = document.getElementById('btn2')
  
            btn1.addEventListener('click',clickBtn)
            btn2.addEventListener('click',clickBtn)
        }

        function clickBtn(e){
            switch(e.target.id){
                case 'btn1':
                    console.log('버튼 1이 눌렸어요')
                    break
                case 'btn2':
                    console.log('버튼 2이 눌렸어요')
                    break
            }
        }

3. 이벤트 전파(Event Propagation)

- 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정을 의미합니다.
- document 객체나 html 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기위해 이벤트 전파가 일어납니다.

- 버블링 전파방식
 : 자식에서 부모로 이벤트를 전파

- 캡처링 전파방식
: 부모에서 자식으로 이벤트를 전파

이벤트 전파를 막는 방법

이벤트객체명.stopPropagation()

    <h2>이벤트 전파</h2>
    <div id="divBox">
        <p id="pBox">
            <span id="spanBox">클릭</span>
        </p>
    </div>
    <p id="text"></p>

 

 

window.onload = function(){
       document.getElementById('divBox').addEventListener('click',clickDiv)
       document.getElementById('pBox').addEventListener('click',clickP)
       document.getElementById('spanBox').addEventListener('click',clickSpan)
}

function clickDiv(e){
    document.getElementById('text').innerHTML += "<span style='color:red'>div를 클릭했어요</span><br>"
}
function clickP(e){
    document.getElementById('text').innerHTML += "<span style='color:blue'>p를 클릭했어요</span><br>"
}
function clickSpan(e){
    document.getElementById('text').innerHTML += "<span style='color:gold'>span을 클릭했어요</span><br>"
}

이벤트 전파로 클릭을 선택하면 모든 이벤트 실행

이벤트 리스너 뒤에 true를 붙이면 캡쳐링전파방식으로 div->p->span순서로 진행된다.

document.getElementById('divBox').addEventListener('click',clickDiv, true)
document.getElementById('pBox').addEventListener('click',clickP, true)
document.getElementById('spanBox').addEventListener('click',clickSpan,true)

function clickSpan(e){
     e.stopPropagation()
     document.getElementById('text').innerHTML += "<span style='color:gold'>span을 클릭했어요</span><br>"
}

e.stopPropagation() 을 사용하면 전파가 차단된다.