event.target

event.target & event.currentTarget

<li>
  <span>
     <button onClick={Check}>
       <span> Click </span>
     </button>
  </span>
</li>

위 코드에 Check값을 다음과 같이 주고 실행시켜본다

const Check = (event) => {
	console.log(event.target);
	console.log(event.currentTarget);

event.target 값으로는 <span> Click </span> 나오고
event.currentTarget 값으로<button><span> Click </span></button> 나온다.

event.target은 자식요소를 리턴하고
event.currentTarget는 부모요소를 리턴한다.

객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.

const name = 'tom';
const object = {
  [name] : 'value'
};
//결과 값
{
  'tom' : 'value'
}
``

좋은 웹페이지 즐겨찾기