e.target.value 이벤트 객체에서 value값 가져오기

const value = e.target.value;
: 와 같이 이벤트 객체에서 'value' 값을 가져올 때 유의해야 할 점 

 

1. 이벤트 객체의 'target' 속성 확인

 'e.target' 을 통해 이벤트가 발생한 요소를 참조할 수 있다.

그러나 모든 이벤트가 'target' 속성을 가지는 것은 아니기 때문에 'e.currentTarget' 을 사용해야 할 경우가 있다.

따라서 이벤트 객체 구조를 확인하고 사용할 속성을 올바르게 선택해야 함.

 

// 일부 일반적인 이벤트 유형 중 'target' 속성을 사용하는 대신
// 다른 속성을 사용해야 하는 경우가 있다.

1. 이벤트 위임
>> 이벤트 위임은 부모 요소에 이벤트 핸들러를 등록하고, 하위 요소에서 발생하는 이벤트를 부모 요소에서 처리하는 방식이다.
이 경우 'e.target'은 이벤트가 발생한 실제 요소가 아니라, 이벤트를 위임한 부모 요소를 가리킨다.
즉, 이벤트 핸들러에서는 e.currentTarget속성을 사용하여 현재 핸들러가 등록된 요소를 참조해야 한다.

function handleClick(e) {
	// 부모 요소에서 발생한 이벤트의 처리
    console.log("부모 요소에서 클릭이벤트 발생");
}

document.getElementById("parent").addEventListener("click", handleClick);


2. 키보드 이벤트
>> 'keydown', 'keyup'의 경우에는 'target' 대신 'e.key', 'e.keyCode' 속성을 사용하여 눌린 키의 값을 가져온다.

function handleKeyPress(e) {
	// 눌린 키의 값을 가져옴
    console.log("눌린 키: ", e.key);
}

document.addEventListener("keydown", handleKeyPress);


3. 마우스 이벤트
>> 일부 마우스 이벤트 (예: 'mouseover', 'mouseout')에서는 'e.relatedTarget' 속성을 사용하여 이벤트와 관련된 요소를 가져올 수 있다.

function handleMouseOver(e) {
	// 마우스가 요소 위로 이동한 관련 요소
    console.log("이동한 요소: ", e.relatedTarget);
}

document.getElementById("element").addEventListener("mouseover", handleMouseOver);

2. 요소의 값 확인

 target 속성에서 값을 가져오려면 해당 요소가 실제로 값을 가지는 요소여야 한다.

일반적으로 input, textarea, select와 같은 입력 요소에서 value를 가져오는 데 사용된다.

 

그러나, 일반적인 html 요소 (예: 'div', 'span') 는 value 속성이 없으므로 e.target.value가 의미가 없다.  

 

3. 기본 이벤트 동작 차단

 이벤트 핸들러 내에서 값 할당 이후에 추가적인 동작을 수행할 예정이라면, 일부 이벤트 유형(예: <form>의 submit 이벤트)의 경우 기본 동작이 발생하지 않도록 e.preventDefault()를 호출해야 할 수 있다.

그러나 이는 해당하는 이벤트 유형과 요구사항에 따라 다르므로 필요에 따라 적절하게 처리해야 한다.