๐ ๋ฌธ์ ํ์
์บ๋ฆฐ๋์ ์ฒดํฌ์ธ ์ฒดํฌ์์ ๋ ๋ฒ ํด๋ฆญ์ ํด์ผ ํ๋๋ฐ ํ ๋ฒ๋ง ํด๋ฆญํด๋ ์บ๋ฆฐ๋๊ฐ ๋ซํ๋ ํ์์ด ๋ฐ์
๊ฒฐ๋ก : ์ด ํ์์ ์ด๋ฒคํธ ๋ฒ๋ธ๋ง ๋๋ฌธ์ ๋ฐ์ํ ํ์์ธ๋ฐ ์ด ๊ฒ์ e.stopPropagation() ๋ฅผ ์ฌ์ฉํด์ ํด๊ฒฐํ์ต๋๋ค.
๐ ๊ณผ์
https://fe-developers.kakaoent.com/2022/220908-react-event-and-browser-event/
์ฌ์ค ์ด ๋ฌธ์ ๋ฅผ ๋ง๋๊ธฐ ์ ์ ๋ฒ์ค์์ ์ปค๋ฆฌ ์ด๋ฆฌ๋ผ๋ ์ดํ์ ํตํด์
์นด์นด์ค ํ๋ก ํธ ์๋ ๋ธ๋ก๊ทธ์์ ์ด๋ฒคํธ ์บก์ฒ๋ง , ๋ฒ๋ธ๋ง ํ์์ ๊ดํ ๊ธ์ ์ฝ์์ต๋๋ค.
๊ทผ๋ฐ ๋ค์๋ ์บ๋ฆฐ๋๋ฅผ ์ง๋๋ฐ ์บ๋ฆฐ๋๊ฐ ํด๋ฆญ ์ ๋ฐ๋ก ๋ซํ๋ ํ์์ ๋ง์ฃผํ์ต๋๋ค.
์ด๋ ์ ์ด๊ฑฐ ์ด์ ๋ดค๋ ์ด๋ฒคํธ ๋ฒ๋ธ๋ง ํ์์ธ๊ฐ?๋ผ๋ ํ๋จ์ ํ์ต๋๋ค.
๊ทธ๋ฌ๋ฉด ์ฝ์๋ก๊ทธ๋ก ์ฌ์ฉํด์ ์ด๋ฒคํธ๊ฐ ์ด๋ค ์์ผ๋ก ์ ํ๋๋์ง ํ์ธํด ๋ณด๊ฒ ์ต๋๋ค.
๋ชจ๋ฌ์ฐฝ์ด onClick ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํด์ ์ด๋ฆฌ๊ณ , ์บ๋ฆฐ๋๋ฅผ ํด๋ฆญ ์ ์บ๋ฆฐ๋ ๊ฐ onClick์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํด์ ์ฐํ๊ณ ๋์ ์บ๋ฆฐ๋๋ฅผ ํด๋ฆญํ๋ onClick์ด๋ฒคํธ๊ฐ ๋ชจ๋ฌ๊น์ง ์ ๋ฌ๋์ด์ ๋ชจ๋ฌ์ด onClick์ด๋ฒคํธ๋ก ์ธํด์ ๋ซํ๋ ํ์์ธ ๊ฒ ์ ๋ฐ๊ฒฌํ์ต๋๋ค.
๊ทธ๋ฌ๋ฉด ์ด ๊ฒ์ ์ด๋ป๊ฒ ํด๊ฒฐํด์ผ ํ ๊น์ ??
์ด์ ๋ณธ ํ๋ก ํธ ์๋ ๊ธฐ์ ๋ธ๋ก๊ทธ์์๋ event.stopPropagation๋ฅผ ์ฌ์ฉํด์ ์ด๋ฒคํธ๋ฅผ ๋ง์ ์ ์๋ค๋ ๋ด์ฉ์ ๋ณด์์ต๋๋ค.
์ด๊ฒ์ ์ ์ฉํ๋ฉด ์ด๋ฒคํธ๊ฐ ์ ํ๋๋ ๊ฒ์ ๋ง์ ์ ์์๊น์??
๋ ์ด์ ์บ๋ฆฐ๋๋ฅผ ํด๋ฆญํด์ ์ด๋ฒคํธ๊ฐ ์ ํ๋์ง ์๊ณ ์ฒดํฌ์ธ, ์ฒดํฌ์์ ์ด ์ ์ฐํ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค!!
'FrontEnd > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์๋ฐ์คํฌ๋ฆฝํธ "this" ๋์ ์ปจํ ์คํธ ๊ฒฐ์ ์ ์ดํดํ์ (0) | 2023.12.13 |
---|---|
[JS] ๋์ค์ฝ๋ ๋ด ๋ง๋ ํ๊ธฐ (0) | 2022.12.13 |
[JS] Scope ์ค์ฝํ with(deep dive) (0) | 2022.06.06 |
[JS] ๋น๋๊ธฐ ์์ ๋ฅผ ์ง์ ๋ง๋ค๋ฉด์ ๊ณต๋ถ (0) | 2022.05.29 |
[JS] ProtoType (0) | 2022.05.26 |