๐Ÿ’ก Event.target VS Event.currentTarget

devgosunmanยท2021๋…„ 3์›” 19์ผ
0

๐ŸŒธ ๋ฌธ์ œ ์ƒํ™ฉ

  • ์•„๋ž˜์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ง  ์ ์ด ์žˆ๋‹ค.
  • e.target์„ ์ด์šฉํ•ด CSS๋ฅผ ๋ฐ”๊พธ๊ณ ์ž ํ•˜์˜€๋Š”๋ฐ
  • ๋‚ด ์ƒ๊ฐ๊ณผ ๋‹ค๋ฅด๊ฒŒ ์›€์ง์—ฌ ๋””๋ฒ„๊น…ํ•˜๋Š”๋ฐ ์˜ค๋žœ ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ๋‹ค.
  • ํ•ด๋‹ต์€ e.target์ด ์•„๋‹ˆ๋ผ e.currentTarget๋ฅผ ์ผ์–ด์•ผ ํ•˜๋Š”๊ฑด๋ฐ
  • ๊ทธ ์ด์œ ๋ฅผ ์„ค๋ช…ํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค.

const app = () => {

  const onClick = e => {
    console.log(e.target)
    console.log(e.currentTarget)
  }
  return (
      <div onClick={onClick}>
      	<button> 1 </button>
      	<button> 2 </button>
      </div>
    )
}

๐ŸŒท ๋‘ ์ฝ”๋“œ์˜ ์ฐจ์ด

  • ์‰ฝ๊ฒŒ ๋งํ•ด e.target์€ event๊ฐ€ ์ „๋‹ฌํ•œ ๊ฐ์ฒด์— ๋Œ€ํ•œ ์ฐธ์กฐ์ด๊ณ ,
  • e.currentTarget์€ ์ด๋ฒคํŠธ์˜ ๋ฒ„๋ธ”๋ง ๋˜๋Š” ์บก์ฒ˜ ๋‹จ๊ณ„์—์„œ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์ฐธ์กฐ์ด๋‹ค.
  • ์•„์ง๋„ ์–ด๋ ต๋‹ค๋ฉด ๋” ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค.
  • ์œ„ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  1์ธ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์ฝ˜์†”์—๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ์ฐํžŒ๋‹ค.
  • <button> 1 </button>
  • <div><button> 1 </button><button> 2 </button></div>
  • ์ดํ•ด๊ฐ€ ๋˜๋Š”๊ฐ€?
  • ๋‹ค์‹œ ์„ค๋ช…ํ•˜์ž๋ฉด..
  • e.target์€ ์ •ํ™•ํ•˜๊ฒŒ ๊ทธ ์ด๋ฒคํŠธ๊ฐ€ ์‹œ์ž‘๋œ element๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฑฐ๋ผ๋ฉด,
  • e.currentTarget์€ ํ˜„์žฌ e๋ฅผ ์ธ์ž๋กœ ๋ฐ›๋Š” ํ•จ์ˆ˜(์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ)๊ฐ€ ๋‹ฌ๋ ค์žˆ๋Š” element๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.
  • ํ˜น์‹œ๋‚˜ ํ•˜๋Š” ๋งˆ์Œ์— e.currentTarget์— ๋Œ€ํ•œ ๊ณต์‹ ๋ฌธ์„œ๋„ ์บก์ณํ•˜์—ฌ ์ฒจ๋ถ€ํ•œ๋‹ค.

profile
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ํŒŒ์ด์ฌ ๊ทธ๋ฆฌ๊ณ  ์ปดํ“จํ„ฐ์™€ ๋„คํŠธ์›Œํฌ

0๊ฐœ์˜ ๋Œ“๊ธ€