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()
})
// -> 스크롤 내리는 건 안막아짐ㅎㅎ;;