e / e.target / e.target.value

1. e (event 이벤트 객체) 

• 이벤트 핸들러 함수의 첫 번째 매개변수로 전달되는 객체이다. 보통 e 또는 event로 표현한다.
• 발생한 이벤트에 대한 모든 정보를 담고 있는 객체로, 이벤트의 종류, 타켓 요소, 관련된 위치 정보, 키보드 입력 정보 등 다양한 속성과 메서드를 포함하고 있다.
• 예) click, keydown 같은 이벤트 정보가 들어 있다.

document.addEventListener('click', function(e) {
    console.log(e);  // 이벤트에 대한 전체 정보
});

 

2. e.target

• 이벤트가 발생한 대상 요소를 가리킨다.
• 이벤트가 발생한 구체적인 HTML 요소(노드)를 가리키며, 이벤트가 발생한 버튼, 입력 필드, 링크 등 어떤 HTML 요소인지 알 수 있게 해준다.
• 예를 들어, 버튼 클릭 이벤트가 발생하면 e.target은 그 버튼 요소를 가리킨다.

document.addEventListener('click', function(e) {
    console.log(e.target);  // 클릭된 요소
});

 

3. e.target.value

• e.target이 폼 요소(input, textarea 등) 일 경우, 그 요소에 입력된 값이다.
• 주로 입력 필드에서 현재 입력된 값을 가져오는 데 사용된다.
• 예를 들어, 사용자가 텍스트를 입력 필드에 글자를 입력할 때, e.target.value를 통해 그 값을 얻을 수 있다.

document.querySelector('input').addEventListener('input', function(e) {
    console.log(e.target.value);  // 입력된 값
});

 

간단하게 말하자면

• e : 이벤트 객체 자체로, 이벤트에 대한 모든 정보를 담고 있다.
• e.target : 이벤트가 발생한 구체적인 HTML 요소를 가리킨다.
• e.target.value : 이벤트가 발생한 요소가 input이나 textarea일 경우, 그 안에 입력된 값을 나타낸다.

e.target.value : 이벤트가 입력된 요소가 텍스트 영역인 경우 그 안에 입력된 값이 있습니다.