JS 09 EventListener

Seungju Hwangยท2021๋…„ 1์›” 24์ผ
0

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
10/13
post-thumbnail

Intro

JS์˜ ๋ชฉ์  (DOM์ด ์›€์ง์ด๋Š” ๋งˆ๋ฒ•!)์„ ๋‹ฌ์„ฑํ•˜๋Š” ๋ฐ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ธฐ๋Šฅ!

๐Ÿ”ต ๊ฐœ๋…

event, addEventListener, event.prventDefault()

event

HTML ๋ฌธ์„œ ๋‚ด์—์„œ ์ผ์–ด๋‚˜๋Š” ์‚ฌ๊ฑด ๋˜๋Š” ์ผ

  • click
  • submit
  • keydown
  • mouseover
  • change
  • ...

addEventListener

ํŠน์ • ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด, ํ• ์ผ์„ ๋งŒ๋“ค์–ด์ฃผ์ž!

eventTarget.addEventListener(type, listener function)
  • eventTarget : ์ด๋ฒคํŠธ ๊ฐ์ง€๋ฅผ ์œ„ํ•œ ์š”์†Œ ๋˜๋Š” ํƒœ๊ทธ
  • addEventListener : eventTarget์— ์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ•ธ๋“ค๋Ÿฌ
  • type : ์ด๋ฒคํŠธ์˜ ์ข…๋ฅ˜
  • listener function : ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜

event.preventDefault()

๊ฐ ํƒœ๊ทธ์˜ ๊ณ ์œ ํ•œ ์ด๋ฒคํŠธ๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜์ง€ ์•Š๋„๋ก ๋ง‰๋Š” ํ–‰์œ„

//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()
})
// -> ์Šคํฌ๋กค ๋‚ด๋ฆฌ๋Š” ๊ฑด ์•ˆ๋ง‰์•„์งใ…Žใ…Ž;;
profile
๊ธฐ๋กํ•˜๋Š” ์Šต๊ด€์€ ์‰ฝ๊ฒŒ ๋ฌด๋„ˆ์ง€์ง€ ์•Š์•„์š”.

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