[JS] event.target

KJA·2022년 8월 16일
0

event.target

  • 이벤트가 발생한 대상 객체를 가리킵니다.

이벤트 발생 과정

  1. 지정된 event target(html 요소) 에
  2. 지정된 event type(click, input 등등)이 발생하면
  3. 지정된 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); // BUTTON
});

id

  • 버튼을 클릭 했을 때 콘솔 창에 btn이 출력됩니다.
const $button = document.querySelector('#btn');
$button.addEventListener('click', (event) => {
    console.log(event.target.id); // btn
});

input event

  • 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;
}

0개의 댓글