๋ˆˆ๋ฌผ์˜ preventDefault๐Ÿ’ง๐Ÿ’ฆโ˜”๏ธ

9rganizedChaosยท2021๋…„ 11์›” 14์ผ
1

์ด์ œ ํ‰์ƒ preventDefault๋ฅผ ์žŠ๊ธฐ๋Š” ํž˜๋“ค์ง€ ์•Š์„๊นŒ...!
๊นŠ์€ ์‚ฌ์—ฐ์€ ์ง€๊ธˆ ์—ฌ๊ธฐ์— ๊ธฐ์ˆ ํ•  ์ˆ˜ ์žˆ๋Š” ์ƒํ™ฉ์ด ์•„๋‹ˆ๋ผ... ๊ตฌ๊ตฌ์ ˆ์ ˆ ์‚ฌ์—ฐ์„ ๋Š˜์–ด๋†“์„ ์ˆ˜๋Š” ์—†์ง€๋งŒ...
๋Œ€์ถฉ ๋„ˆ๋ฌด ์ค‘์š”ํ–ˆ๋˜ ์ฑ„์šฉ ํ”„๋กœ์„ธ์Šค ๊ณผ์ •์—์„œ, preventDefault์— ๋Œ€ํ•œ ์งˆ๋ฌธ์„ ๋ฐ›์•˜๋Š”๋ฐ... ์ •ํ™•ํ•œ ๊ฐœ๋…์ด ์ƒ๊ฐ๋‚˜์ง€ ์•Š์•„๋ฒ„๋ฆฌ๋Š” ๋ถˆ์ƒ์‚ฌ๊ฐ€... ๋Œ์ด์ผœ๋ณด๋ฉด preventDefault๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์ง€ ์•Š์€ ๊ฒƒ์€ ์•„๋‹ˆ์—ˆ๋Š”๋ฐ... ์™œ ๋‚˜๋Š” "์ง์ ‘ ์‚ฌ์šฉํ•ด๋ณธ ์ ์ด ์—†์–ด์„œ ์ž˜ ๋ชจ๋ฅด๊ฒ ๋‹ค"๋ผ๊ณ  ๋Œ€๋‹ตํ•ด๋ฒ„๋ ธ์„๊นŒ...

์ •ํ™•ํ•œ ๊ฐœ๋…์„ ์ธ์ง€ํ•˜๊ณ  ์‚ฌ์šฉํ•ด์™”๋˜ ๊ฒƒ์€ ์•„๋‹ˆ๊ณ , ์—๋Ÿฌ์ฒ˜๋ฆฌํ•˜๋ฉด์„œ ๋ ˆํผ๋Ÿฐ์Šค๋ณด๊ณ  ์•„ ์ด๊ฑฐ ์“ฐ๋ฉด ๋˜๋Š”๊ตฌ๋‚˜! ํ•˜๊ณ  ์ผ๋˜ ๊ฒƒ์ด๋‹ˆ, ์‚ฌ์‹ค ์–ด์„คํ”„๊ฒŒ ๋‘˜๋Ÿฌ๋Œ€๋Š” ๊ฒƒ๋ณด๋‹ค๋Š” ๋ชจ๋ฅธ๋‹ค๊ณ  ํ•˜๋Š” ํŽธ์ด ๋‚˜์•˜์„์ง€๋„ ๋ชจ๋ฅธ๋‹ค.
๊ทผ๋ฐ ๊ทธ๋ ‡๋‹ค๊ณ  preventDefault๋ฅผ ์‚ฌ์šฉํ•ด๋ณธ ์ ์ด ์—†๋‹ค๊ณ  ํ•  ๊ฒƒ์€ ๊ตณ์ด ์—†์—ˆ๋Š”๋ฐ... ํ›„ํšŒ ๋ง‰๊ธ‰์ด๋‹ค.
๋‚˜๊ฐ™์•„๋„ ์•„์ฃผ์•„์ฃผ ์ค‘์š”ํ•œ ๋ฉด์ ‘์ธ๋ฐ... ์ฃผ๋‹ˆ์–ด๊ฐœ๋ฐœ์ž๊ฐ€ ์™€์„œ preventDefault ๋ณ„๋กœ ์‚ฌ์šฉํ•ด๋ณธ ๊ฒฝํ—˜์ด ์—†๋‹ค๊ณ  ํ•˜๋ฉด, ์ •๋ง ๋ ์šฉ... ํ•ด๋ฒ„๋ฆด ๋“ฏ ์‹ถ๋‹ค.

๊ฒฐ๊ตญ ๋ฉด์ ‘ ๋ณธ ๋‚  ์ดํ›„๋กœ ์ง€๊ธˆ๊นŒ์ง€๋„ ๋ฌธ๋“ ๋ฌธ๋“ preventDefault ์ƒ๊ฐ์ด ๋จธ๋ฆฌ๋ฅผ ์Šค์น˜๊ณ ...
์ด๋ถˆํ‚ฅํ•˜๋Š” ๊ธฐ์–ต์€ ๋Š˜์–ด๋งŒ๊ฐ€๊ณ ... ์ง€๊ธˆ๋„ MSWjs ๊ณต๋ถ€ํ•˜๋˜ ์ค‘์— ์˜ˆ์‹œ ์ฝ”๋“œ ๋‹ค์šด ๋ฐ›์•˜๋Š”๋ฐ...
์•„๋‹ˆ๋‚˜๋‹ค๋ฅผ๊นŒ preventDefault ^^* ... ํ• ๋งŽํ•˜์•Š...

๊ทธ๋ž˜์„œ ๋ชจ์ž๋”ฅ๋‹ค ์ด๋ฒคํŠธ ํŒŒํŠธ ํ•œ ๋ฒˆ ์งš๊ณ  ๋„˜์–ด๊ฐ„๋‹ค...๐Ÿ˜ข๐ŸŒง๐ŸŒŠ

DOM ์š”์†Œ๋“ค์€ ๊ฐ์ž ๊ณ ์œ ์˜ ๊ธฐ๋ณธ ๋™์ž‘์ด ์žˆ๋‹ค.

a ํƒœ๊ทธ: ํด๋ฆญ์‹œ href ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์— ์ง€์ •๋œ ๋งํฌ๋กœ ์ด๋™
checkbox ์ธํ’‹ ํƒœ๊ทธ: ํด๋ฆญ์‹œ ์ฒดํฌ ๋˜๋Š” ์ฒดํฌ ํ•ด์ œ

์ด๋ฒคํŠธ ๊ฐ์ฒด ๋‚ด์˜ preventDefault ๋ฉ”์„œ๋“œ๋Š” ์ด๋Ÿฌํ•œ DOM ์š”์†Œ์˜ ๊ธฐ๋ณธ ๋™์ž‘์„ ์ค‘๋‹จ์‹œํ‚จ๋‹ค!

<!DOCTYPE html>
<html>
  <body>
    <a href="https://www.google.com">go</a>
    <input type="checkbox">
    <script>
      document.querySelector("a").onclick = e => {
        // a ์š”์†Œ์˜ ๊ธฐ๋ณธ ๋™์ž‘์„ ์ค‘๋‹จํ•œ๋‹ค.
        e.preventDefault();
      };
      
      document.querySelector("input[type=checkbox]").onclick = e => {
        // checkbox ์š”์†Œ์˜ ๊ธฐ๋ณธ๋™์ž‘์„ ์ค‘๋‹จํ•œ๋‹ค.
        e.preventDefault();
      };
    </script>
  </body>
</html>

์œ„์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์ฃผ๋ฉด, html ์š”์†Œ๋“ค์˜ ๊ธฐ๋ณธ ๋™์ž‘์ด ์ž‘๋™ํ•˜์ง€ ์•Š๊ฒŒ๋œ๋‹ค!

go๋ผ๋Š” innerText๋ฅผ ๊ฐ€์ง„ a ํƒœ๊ทธ๋ฅผ ํด๋ฆญํ•ด๋„ google๋กœ ์ด๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค!
go ์šฐ์ธก์˜ ์ฒดํฌ๋ฐ•์Šค ์—ญ์‹œ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค!

๊ทธ๋ ‡๋‹ค๋ฉด ์–ด๋–ค ํ™œ์šฉ์‚ฌ๋ก€๊ฐ€ ์žˆ๋Š”๊ฐ€...!

์‚ฌ์‹ค ์œ„์™€ ๊ฐ™์€ ๊ฒฝ์šฐ๋ผ๋ฉด ๊ทธ๋ƒฅ a ํƒœ๊ทธ๋ฅผ ์•ˆ ์“ฐ๋ฉด ๋ ๋“ฏ ์‹ถ๊ณ ...^^*
์•„๋ž˜์™€ ๊ฐ™์€ ์ƒํ™ฉ์ด๋ผ๋ฉด preventDefalut์˜ ํ™œ์šฉ์ด ์ข€ ๋” ์„ค๋“๋ ฅ์žˆ์ง€ ์•Š์„๊นŒ...?

    <a href="https://www.google.com">
      <div>์—ฌ๊ธฐ ํด๋ฆญํ•˜๋ฉด ์ด๋™์‹œ๋–ผ</div>
      <div class="no">์—ฌ๊ธฐ ํด๋ฆญํ•˜๋ฉด ์ด๋™์‹œ๋‚˜์ด๋ฐ</div>
    </a>

์œ„์™€ ๊ฐ™์€ ๊ตฌ์กฐ๋กœ html์ด ๊ตฌ์„ฑ๋˜์–ด ์žˆ์œผ๋ฉด div๊ฐ€ ๋‘˜ ๋‹ค a ์š”์†Œ๋ผ๋Š” ๋ถ€๋ชจ๊ฐ์ฒด์˜ ์ž์‹๋“ค์ด๋ฏ€๋กœ!
๋‘˜ ๋ชจ๋‘์—๊ฒŒ a์š”์†Œ์˜ ๊ธฐ๋ณธ ๋™์ž‘์ด ์ ์šฉ๋˜์–ด ์žˆ์„ ๊ฒƒ์ด๋‹ค!
์ด ๋•Œ ์šฐ๋ฆฌ๋Š” ์•„๋ž˜ div์š”์†Œ์˜ ๊ฒฝ์šฐ ํ•ด๋‹น ๊ธฐ๋ณธ ๋™์ž‘์„ ์ œ๊ฑฐํ•ด์ฃผ๊ณ  ์‹ถ์€ ๊ฒƒ์ด๋‹ค.
๊ทธ๋Ÿด ๋•Œ!!

      document.querySelector(".no").onclick = (e) => {
        // a ์š”์†Œ์˜ ๊ธฐ๋ณธ ๋™์ž‘์„ ์ค‘๋‹จํ•œ๋‹ค.
        e.preventDefault();
      };

์œ„์™€ ๊ฐ™์ด ํ™œ์šฉํ•ด์ฃผ๋ฉด ์œ„ div ์š”์†Œ๋ฅผ ํด๋ฆญํ•˜๋ฉด google๋กœ ์ด๋™ํ•˜์ง€๋งŒ, ์•„๋ž˜์˜ ๊ฒฝ์šฐ๋Š” ๊ทธ๋ ‡์ง€ ์•Š๋‹ค!!

๊ทธ๋Ÿฐ๋ฐ ์™œ preventDefault๋Š” stopPropagation๊ณผ ํ•จ๊ป˜ ์„ธํŠธ๋กœ ๋“ฑ์žฅํ•˜๋Š”๊ฐ€ ๐Ÿ‘ฏโ€โ™‚๏ธ

"preventDefault๋ฅผ ์ง์ ‘ ํ™œ์šฉํ•ด๋ณธ ๊ฒฝํ—˜์ด ๋งŽ์ด ์—†๋‹ค"๋Š” ๋ฌธ์ œ์˜ ๋ฐœ์–ธ์€ ๋Œ€์ฒด ๋ฌด์—‡ ๋•Œ๋ฌธ์ด์—ˆ๋Š”๊ฐ€๋ฅผ ๊ณ ๋ฏผํ•ด๋ณด๋ฉด ํ•˜๋‚˜ ์งš์–ด์ง€๋Š” ์ด์œ ๊ฐ€ ์žˆ๋‹ค. ํ•ด๋‹น ์งˆ๋ฌธ์€ ์‚ฌ์‹ค ์ฒ˜์Œ๋ถ€ํ„ฐ preventDefault์€ ๋ฌด์—‡์ธ๊ฐ€์š”? ๋ผ๋Š” ๋ฐฉ์‹์€ ์•„๋‹ˆ์—ˆ๊ณ , ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง๊ณผ ์บก์ณ๋ง ๋ถ€ํ„ฐ ์ด์–ด์ง„ ์งˆ๋ฌธ์ด์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ค๊ฐ€ ํ›„์— preventDefalut์™€ stopPropagation์„ ํ•จ๊ป˜ ์งˆ๋ฌธ์„ ์ฃผ์…จ์—ˆ๋Š”๋ฐ... ๋‚ด๊ฐ€ stopPropagation์— ๋„ˆ๋ฌด ๋„ˆ๋ฌด ์ต์ˆ™ํ•œ ๊ฒƒ์„ ๊ฐ•์กฐํ•˜๋ ค๋˜ ๋‚˜๋จธ์ง€ ์ž ์‹œ ์‚ฌ๊ณ ~๋ฐœํ™” ๋ฃจํŠธ๊ฐ€ ๊ณ ์žฅ๋‚˜๋ฒ„๋ ค์„œ ์˜ค์ถœ๋ ฅ์„ ํ•ด๋ฒ„๋ฆฐ ๊ฒŒ ์•„๋‹ˆ์—ˆ์„๊นŒ... ๋ญ ๊ทธ๋Ÿฐ ์ด์œ ๋ผ๋„ ๋– ์˜ฌ๋ ค๋ณด๋ฉฐ ์ด๋ถˆํ‚ฅํ•˜๋Š” ๋‚ด ๋งˆ์Œ์„ ๋‹ฌ๋ž˜๋ณธ๋‹ค...

๋ชจ์ชผ๋ก! ๊ทธ๋Ÿฐ๋ฐ ๋‚˜๋Š” ์ด์ œ์™€์„œ ๊ถ๊ธˆํ•ด์ง€๋Š” ๊ฒŒ ์™œ ๋Š˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ด๋ฒคํŠธ๋ฅผ ๊ณต๋ถ€ํ•  ๋•Œ, preventDefault์™€ stopPropagation, ๋‘ ๋ฉ”์†Œ๋“œ๊ฐ€ ์Œ์œผ๋กœ ๋“ฑ์žฅํ–ˆ๋ƒ๋Š” ๊ฒƒ์ด๋‹ค!
์‚ฌ์‹ค ๊ฐœ๋… ์ •์˜๋งŒ ๋†“๊ณ  ๋ณด๋ฉด ์„œ๋กœ ๋„ˆ๋ฌด ๋‹ค๋ฅธ ๋ฉ”์†Œ๋“œ๊ฐ€ ์•„๋‹Œ๊ฐ€! (preventDefault๋Š” html ์š”์†Œ์˜ ๊ธฐ๋ณธ ๋™์ž‘ ๋ฐฉ์ง€, stopPropagation์€ ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง ๋ฐฉ์ง€)
๋ฐ”๋กœ ์œ—๋ถ€๋ถ„ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด๋ฉฐ ์ƒ๊ฐํ•œ ๊ฒƒ์€ preventDefault๋Š” ๋ฌผ๋ก  ๋‹ค์–‘ํ•œ ํ™œ์šฉ ์‚ฌ๋ก€๊ฐ€ ์žˆ๊ฒ ์ง€๋งŒ, ์ด๋ฒคํŠธ๊ฐ€ ์ž์‹์—๊ฒŒ ๋Œ€๋ฌผ๋ฆผ๋˜๋Š” ๊ฒƒ์„ ๋ง‰๋Š” ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ๋ฅผ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ!

๋˜ ๋‹ค๋ฅธ preventDefault์˜ ํ™œ์šฉ ์‚ฌ๋ก€๋Š”?

์‚ฌ์‹ค ๋‚ด๊ฐ€ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•˜๋ฉฐ ์ž์ฃผ ์ ‘ํ•ด์™”๋˜ ํ™œ์šฉ์‚ฌ๋ก€๋Š” ์˜คํžˆ๋ ค ์œ„ ์ฝ”๋“œ์™€ ๊ฐ™์€ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜๋‹ค!
์ฝ”๋“œ์˜ ์ฃผ์„์„ ํ•ด์ œํ•ด๋ณด๋ฉด ๋‹ค๋ฅด๊ฒŒ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
form ํƒœ๊ทธ์˜ submit ํ›„ ์ƒˆ๋กœ๊ณ ์นจ ๊ธฐ๋ณธ๋™์ž‘์ด ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค!

๋ชจ์ชผ๋ก...
์ด ๊ฐ„๋‹จํ•œ ๋ฉ”์„œ๋“œ๋ฅผ ์™œ ๋‚˜๋Š” ์‚ฌ์šฉํ•˜๋ฉด์„œ๋„ ๋ฏธ๋ฆฌ ์ œ๋Œ€๋กœ ์งš์–ด๋†“์ง€ ์•Š์•˜๋Š”๊ฐ€... ๐Ÿ™ˆ ๐Ÿ™ˆ ๐Ÿ™ˆ
๋ญ ํ›„ํšŒํ•ด๋„ ์†Œ์šฉ์€ ์—†๋‹ค... ์•ž์œผ๋กœ๋Š” ์—๋Ÿฌํ•ธ๋“ค๋ง์— ์‹œ๊ฐ„์„ ์ข€ ์Ÿ์œผ๋ฉด์„œ ๊ฐœ๋ฐœํ•˜์ž...

profile
๋ถ€์ •ํ™•ํ•œ ์ •๋ณด๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๋Š” ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๋น ๋ฅด๊ฒŒ ์ˆ˜์ •ํ† ๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค, ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

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

comment-user-thumbnail
2021๋…„ 11์›” 18์ผ

์ €๋„ ์ž˜ ๋ชฐ๋ž๋Š”๋ฐ ์ž˜ ์•Œ๊ฒŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค
๊ฐ์‚ฌํ•ฉ๋‹ˆ;๋‹ค ใ…Žใ…Ž

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ