π preventDefault()
μ΄λ€ μ΄λ²€νΈλ₯Ό λͺ μμ μΌλ‘ μ²λ¦¬νμ§ μμ κ²½μ°, ν΄λΉ μ΄λ²€νΈμ λν λΈλΌμ°μ μ κΈ°λ³Έ λμμ μ€ννμ§ μλλ‘ μ§μ νλ ν¨μλ₯Ό μλ―Ένλ€. μλ₯Ό λ€μ΄ <a> νκ·Έλ <submit> νκ·Έλ κ·Έ νκ·Έμ κ°μ μ μ‘νλ©΄μ ν΄λΉ νμ΄μ§λ₯Ό μλ‘κ³ μΉ¨ νΉμ μ΄λνλ κΈ°λ₯μ κ°μ§κ³ μμΌλ μλμΉ μκ² μ¬μ©λ κ²½μ°κ° μμ μ μκΈ° λλ¬Έμ Event.preventDefault() λ₯Ό μ¬μ©νλ€.
π <a> νκ·Έμμμ μ¬μ© μμ
<a href="https://jheaon.tistory.com/" id="link">ν΄μ¨μ λΈλ‘κ·Έ</a>
<script>
document.querySelector('#link').addEventListener('click', function(e){
e.preventDefault();
});
// a νκ·Έ ν΄λ¦ μ preventDefaultλ₯Ό μ¬μ©νκΈ° λλ¬Έμ λ§ν¬κ°μ΄ μμ΄λ μ΄λνμ§ μλλ€.
</script>
π <submit> νκ·Έμμμ μ¬μ© μμ
const onLoginSubmit = (e) => {
e.preventDefault();
loginForm.classList.add("hidden");
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}
π preventDefault()μ stopPropagation()
Javascriptμμ μ΄λ²€νΈ μ€ν μ μ΄λ₯Ό νλ λ°©λ²μ preventDefault() λ§κ³ λ, stopPropagation()μ΄ μ‘΄μ¬νλλ° μ΄λ μ΄λ²€νΈ λ²λΈλ§μ μ€λ¨ ν μ μλ€λ μ μμμ μ°¨μ΄μ μ΄ μλ€.
π μ΄λ²€νΈ λ²λΈλ§(Event Bubbling)
μ΄λ²€νΈ λ²λΈλ§μ νΉμ νλ©΄ μμμμ μ΄λ²€νΈκ° λ°μνμ λ ν΄λΉ μ΄λ²€νΈκ° λ μμμ νλ©΄ μμλ€λ‘ μ λ¬λμ΄ κ°λ νΉμ±μ μλ―Ένλ€.
// html <body> <div class="one"> <div class="two"> <div class="three"> </div> </div> </div> </body>// javascript const divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { console.log(event.currentTarget.className); }β
μ΄λ κ² 3κ°μ div νκ·Έμ ν΄λ¦μ logEventλ₯Ό λ°μμν€λ ν¨μλ₯Ό λ±λ‘νκ³ μ΅νμ div νκ·Έλ₯Ό λλ₯΄λ©΄ λ€μκ³Ό κ°μ΄ μ€νλλ κ²μ νμΈ ν μ μλ€.three two one
div νκ·Έ νλλ§ ν΄λ¦ νμλΏμΈλ°, 3κ°μ μ΄λ²€νΈκ° λ°μνλ μ΄μ λ λΈλΌμ°μ κ° μ΄λ²€νΈλ₯Ό κ°μ§νλ λ°©μ λλ¬ΈμΈλ°, λΈλΌμ°μ λ νΉμ νλ©΄ μμμμ μ΄λ²€νΈκ° λ°μνμ λ, κ·Έ μ΄λ²€νΈλ₯Ό μ΅μμμ μλ νλ©΄ μμκΉμ§ μ΄λ²€νΈλ₯Ό μ νμν¨λ€. μ΄μ κ°μ΄ νμμμ μμμμλ‘μ μ΄λ²€νΈ μ ν λ°©μμ "μ΄λ²€νΈ λ²λΈλ§" μ΄λΌκ³ νλ€.
μ 리νμλ©΄ preventDefault()λ λ¨μν htmlμμ νμ€μΌλ‘ μ 곡νλ νκ·Έμ κΈ°λ³Έ μ΄λ²€νΈ λ°μμ λ§λ λ©μλλΌλ©΄, stopPropagation()μ λ§ κ·Έλλ‘ μμ μ리먼νΈλ‘μ μ΄λ²€νΈ λ²λΈλ§μ λ§λλ€λ κ²μμ μ°¨μ΄κ° μλ€λ κ²μ νμΈ ν μ μλ€.
'Programing Language > Javascript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [Javascript] Local Storage λ€λ£¨κΈ° (0) | 2023.03.21 |
|---|---|
| [Javascript] classList μ μμ μ¬μ©λ°©λ² (0) | 2023.03.21 |
| [Javascript] event listener μ¬μ©νλ λ²κ³Ό event μ μ’ λ₯ (0) | 2023.03.20 |
| [Javascript] getElement*, querySelector*λ‘ μμ μ κ·ΌνκΈ° (0) | 2023.03.18 |
| [Javascript] undefined, null μ μ μμ μ°¨μ΄ (0) | 2023.03.17 |
