event.target
이벤트 발생 과정
- 지정된 event target(html 요소) 에
- 지정된 event type(click, input 등등)이 발생하면
- 지정된 event handler(함수)가 실행됩니다.
event.target 속성 값
<button id="btn">입력</button>
textContent
- 버튼을 클릭 했을 때 콘솔 창에
입력
이 출력됩니다.
const $button = document.querySelector('#btn');
$button.addEventListener('click', (event) => {
console.log(event.target.textContent);
});
tagName
- 버튼을 클릭 했을 때 콘솔 창에
BUTTON
이 출력됩니다.
const $button = document.querySelector('#btn');
$button.addEventListener('click', (event) => {
console.log(event.target.tagName);
});
id
- 버튼을 클릭 했을 때 콘솔 창에
btn
이 출력됩니다.
const $button = document.querySelector('#btn');
$button.addEventListener('click', (event) => {
console.log(event.target.id);
});
- input 요소에 값을 입력하자마자 로그에 기록합니다.
<input placeholder="Enter some text" name="name"/>
<p id="values"></p>
const input = document.querySelector('input');
const log = document.getElementById('values');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}