[ Javascript ] Event 객체

1. Event 객체

Event를 발생시킨 요소와 발생한 Event에 대한 정보를 제공한다.

이벤트가 발생하면 event 객체는 동적으로 생성되며, 이벤트를 처리할 수 있는 이벤트 핸들러에 인자로 전달된다.

이벤트 핸들러를 선언할 때 이벤트 객체를 정달 받을 첫 번째 매개변수를 명시적으로 선언해야 한다.

매개변수 이름은 e, event로 많이 사용하나 다른 매개변수 이름을 사용해도 상관없다.

// 이벤트 핸들러를 선언할때 event 객체를 전달 받을 첫번째 매개변수를 명시적으로 선언
function showEvent(e)
{
    console.log("마우스 X좌표 : " + e.clientX + " Y좌표 :" + e.clientY);
}

// 이벤트 객체는 이벤트 핸들러에 암묵적으로 전달됨
addEventListener("click", showEvent);	// 참조요소가 없으면 기본 window 전역 객체

2. Event 객체 속성 

속성(Property)	설명
target	실제로 이벤트를 발생시킨 요소를 가리킴
currentTarget	이벤트에 바인딩된 DOM요소 (addEventListener 메소드 앞에 기술된 객체)
type	발생한 이벤트 종류(click, dbclick, keydown ...)
altKey	이벤트 발생시 alt 키를 누르고 있는지 여부의 boolean 값
shiftKey	이벤트 발생시 shift 키를 누르고 있는지 여부의 boolean 값
ctrlKey	이벤트 발생시 ctrl 키를 누르고 있는지 여부의 boolean 값
keyCode	이벤트 발생시 키보드의 눌린 키의 고유값
clientX	document에서 스크롤 이동값을 제외하고 마우스의 x좌표 값
clientY	document에서 스크롤 이동값을 제외하고 마우스의 y좌표 값
offsetX	이벤트 발생시 이벤트 대상으로 부터 마우스 x좌표 값
offsetY	이벤트 발생시 이벤트 대상으로 부터 마우스 y좌표 값
pageX	document에서 스크롤 이동값을 포함한 마우스의 x좌표 값
pageY	document에서 스크롤 이동값을 포함한 마우스의 y좌표 값
screenX	전체 모니터 스크린을 기준으로 마우스의 x좌표 값
screenY	전체 모니터 스크린을 기준으로 마우스의 y좌표 값
cancelable	요소의 기본 동작을 취소 시킬수 있는지 여부(true/false)
cancelBubble	지원이 중단됨 stopPropagation의 별칭
eventPhase	이벤트 흐름(event flow)상에서 어느 단계에 있는지 (0:이벤트 없음, 1:캡처링, 2:타킷, 3:버블링)

<div class="btnwrap"><button type="button"> 클릭!! </button></div>
<sctipt>
document.querySelector("div.btnwrap").addEventListener("click", function(e) {
    // this : 이벤트에 바인딩된 DOM요소 (div 요소)
    console.log("this : ", this);
    
    // target : 실제로 이벤트를 발생시킨 요소(button OR div)
    console.log("e.target : ", e.target);
    
    // currentTarget : 이벤트에 바인딩된 DOM요소 (div)
    console.log("e.currentTarget : ", e.currentTarget);
});
</script>

3. Event 객체 메서드

메서드(Method)	설명
preventDefault()	브라우저의 기본 동작을 차단
stopPropagation()	이벤트의 버블링이 진행되지 않도록 차단

4. Event 버블링 및 캡처링 

✔️ 버블링

버블링은 한 요소에 이벤트가 발생되면 그 요소의 부모 요소에 이벤트도 같이 발생되는 이벤트 전파를 말한다.

자바스크립트 addEventListener() 함수로 요소의 이벤트를 등록하면 자식 요소에 이벤트가 발생하면 부모 요소도 버블링을 통해 이벤트가 전파되어 리스너가 호출된다.

버블링은 자식요소에서 부모요소로 이벤트가 전파되는 흐름이다.

✔️ 캡처링

캡처링은 한 요소에 이벤트가 발생되면, 그 요소의 자식요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다.

브라우저의 이벤트 전파 방식은 버블링이 기본값이기 때문에 캡처링으로 설정하기 위해선 자바스크립트 addEventListener() 함수의 3번째 매개변수로 true값을 주면 이 이벤트 타깃은 캡처링을 통해 이벤트를 전파된다.

EventTarget.addEventListener("eventType", functionName [, useCapture]);

element.addEventListener("click", (e) => { ... }, true);
child.addEventListener("click", (e) => {
	console.log("child clicked!");
}, true);

 

5. 이벤트 전파 제어(버블링, 캡처링)

📌 stopPropagation() 

stopPropagation() 메서드를 호출하면 버블링 또는 캡처링 설정에 따라 상위, 하위로 가는 이벤트 전파를 차단할 수 있다.

<div id="ancestor">
    <div id="parent">
        <div id="child"> 클릭!! </div>
    </div>
</div>

<script>
document.querySelector("#ancestor").addEventListener("click", (e) => {
    e.stopPropagation();
    console.log("ancestor event");
});

document.querySelector("#parent").addEventListener("click", (e) => {
    e.stopPropagation();
    console.log("parent event");
});

document.querySelector("#child").addEventListener("click", (e) => {
    e.stopPropagation();
    console.log("child event");
});
</script>

📌 stopImmediatePropagation()

stopImmediatePropagation() 메서드를 호출하면 이벤트 전파와 더불어 형제 이벤트 실행을 중지한다.

동일한 요소의 특정 이벤트를 처리하는 핸들러가 여러 개 일 때 stopPropagation()은 버블링은 차단하지만 

다른 형제 핸들러들이 동작하는 건 차단하지 못하기 때문에 stopImmediatePropagation()을 사용한다.

child.addEventListener("click", (e) => {
    if(e.target.className == "child")
        e.stopImmediatePropagation();
        
    console.log("child event");
});

child.addEventListener("click", (e) => {
    console.log("child event");
});

📌 e.target 조건으로 방지

직접 조건 분기를 통해 버블링 및 캡처링을 제어한다.

document.body.addEventListener("click", (e) => {
    if (e.target.id === "ancestor") {
        console.log("ancestor");
    }
    if (e.target.id === "parent") {
        console.log("parent");
    }
    if (e.target.id === "child") {
        console.log("child");
    }
});

📌 preventDefault()

preventDefault()는 이벤트 전파뿐만 아니라 기본 이벤트 동작 자체를 취소한다.

 

참조 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90%EB%A7%81