JS์ ๋ชฉ์ (DOM์ด ์์ง์ด๋ ๋ง๋ฒ!)์ ๋ฌ์ฑํ๋ ๋ฐ ๊ฐ์ฅ ์ค์ํ ๊ธฐ๋ฅ!
event, addEventListener, event.prventDefault()
HTML ๋ฌธ์ ๋ด์์ ์ผ์ด๋๋ ์ฌ๊ฑด ๋๋ ์ผ
ํน์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด, ํ ์ผ์ ๋ง๋ค์ด์ฃผ์!
eventTarget.addEventListener(type, listener function)
๊ฐ ํ๊ทธ์ ๊ณ ์ ํ ์ด๋ฒคํธ๊ฐ ๋ธ๋ผ์ฐ์ ์์ ๋์ํ์ง ์๋๋ก ๋ง๋ ํ์
//1. checkbox
const checkBox = document.querySelector('#myCheckBox')
checkBox.addEventListener('click', function (event) {
// cancelable -> ์ด๋ฒคํธ๊ฐ ์ทจ์ ๊ฐ๋ฅํ์ง ์ฌ๋ถ๋ฅผ true/false๋ก ๋ฐํ
console.log(event)
console.log(event.cancelable)
event.preventDefault()
})
// -> ํด๋ฆญ ๋ง์์ง
//2. form
const form = document.querySelector('#myForm')
form.addEventListener('submit', function (event) {
console.log(event)
console.log(event.cancelable)
event.preventDefault()
// event.target.reset() // value ๊ฐ ์ด๊ธฐํ
})
// -> ํผ ์๋ธ๋ฐ ๋ง์์ง
//3. link
const link = document.querySelector('#myLink')
link.addEventListener('click', function (event) {
console.log(event)
console.log(event.cancelable)
event.preventDefault()
})
// -> ๋งํฌ๋ ๋ง์์ง
//4. input
const input = document.querySelector('#myInput')
input.addEventListener('keydown', function (event) {
console.log(event)
console.log(event.cancelable)
event.preventDefault()
})
// -> ๊ธ ์ฐ๋ ๊ฑฐ ๋ง์์ง
//5. preventDefault๊ฐ ๋ถ๊ฐ๋ฅํ ์ด๋ฒคํธ
document.addEventListener('scroll', function (event) {
console.log(event.cancelable)
event.preventDefault()
})
// -> ์คํฌ๋กค ๋ด๋ฆฌ๋ ๊ฑด ์๋ง์์งใ
ใ
;;