JavaScript 이벤트

 

 

 

 

이벤트

   - 특정한 상황에 따라 원하는 동작을 실행시킬 수 있는 기능입니다.

   - 클릭, 키다운, 드래그 등의 다양한 이벤트를 설정할 수 있습니다.

 

 

 

 

이벤트 등록/제거

addEventListener

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')

parentEl.addEventListener('click', ()=>{
    console.log('Parent')
})


childEl.addEventListener('click',()=>{
    console.log('Child')
})

   - 이벤트를 등록하면서, 발생한 이벤트의 정보를 가진 객체를 전달합니다.

   - addEventListener( 이벤트종류, 콜백함수 ) 으로 구성됩니다.

   - 이벤트 종류는 아래 링크에서 확인할 수 있습니다.

      https://www.w3schools.com/jsref/dom_obj_event.asp

HTML DOM Event Object

   - 이벤트에 사용되는 콜백 함수를 '핸들러' 라고 합니다.

   - 이 코드대로라면 child 클래스를 눌러도 parent 이벤트가 같이 출력되는데, 이는 이벤트 버블링 때문입니다.

 

 

 

 

removeEventListener

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')

const handler = ()=>{
    console.log('Parent')
}

parentEl.addEventListener('click', handler)

childEl.addEventListener('click',()=>{
    parentEl.removeEventListener('click',handler)
})

   - addEventListener로 등록된 이벤트를 제거합니다.

   - removeEventListener( 이벤트 종류, 핸들러의 이름 )으로 사용합니다

   - 익명함수로 사용시 remove를 할 수 없으므로 핸들러를 기명함수로 사용해야 합니다.

   - 제거 이후에는 이벤트가 발생하지 않습니다.

 

 

 

 

이벤트 객체

const parentEl = document.querySelector('.parent')

parentEl.addEventListener('click', event =>{
    console.log(parentEl)
    console.log(event.target)
})

   - 발생한 이벤트의 정보를 가진 객체입니다.

   - 이벤트의 대상, 마우스 클릭 위치, 시간 등 다양한 정보를 가지고 있습니다.

      Ex) event.target은 이벤트 대상이 되는 객체의 값을 반환합니다.

 

 

 

 

이벤트 기본 동작 방지

const anchorEl = document.querySelector('a')

anchorEl.addEventListener('click', event =>{
   event.preventDefault()
})

parentEl.addEventListener('wheel', event=>{
    event.preventDefault()
})

   - a 태그 클릭시 페이지 이동 기능 등을 기본동작 이라고 합니다..

   - preventDefault() 를 사용하여 기본 동작을 방지할 수 있습니다.

 

 

 

 

마우스 이벤트

포인터 이벤트  -  contextmenu, click

childEl.addEventListener('click', ()=>{
    childEl.classList.toggle('active')
})

childEl.addEventListener('contextmenu', ()=>{
    event.preventDefault()
    console.log(childEl.textContent)
})

parentEl.addEventListener('mousedown', ()=>{
    parentEl.classList.add('active')
})

parentEl.addEventListener('mouseup', ()=>{
    parentEl.classList.remove('active')
})

parentEl.addEventListener('mousemove', ()=>{
    console.log(event.x, event.y)
})

parentEl.addEventListener('wheel', ()=>{
    console.log('Parent Wheel')
})

   - 클릭 이벤트

      1) click : 마우스 버튼을 클릭했을때 발생합니다.

      2) dbclick : 마우스 버튼을 더블클릭했을때 발생합니다.

      3) contextmenu : 마우스 오른쪽 버튼을 클릭했을때 발생합니다.

      4) mousedown : 마우스 버튼을 누를때 발생합니다.

      5) mouseup : 마우스 버튼을 뗄 때 발생합니다.

 

   - 마우스 커서 이벤트

      1) mouseenter : 포인터가 요소로 들어갈때 발생합니다.

      2) mouseleave : 포인터가 요소에서 나올 때 발생합니다.

      3) mousemove : 마우스 포인터가 움직일 때 발생합니다.

 

   - 마우스 휠 이벤트

      1) wheel : 휠 버튼이 회전할 때 발생합니다.

 

 

 

 

키보드 이벤트

keydown & keyup

const inputEl = document.querySelector('input')

inputEl.addEventListener('keydown', event=>{
    if(event.key === 'Enter'){
        console.log('Enter')
    }else if (event.key === 'Escape'){
        console.log('ESC')
    }else{
        console.log(event.key)
    }
})

inputEl.addEventListener('keyup', event=>{
    if(event.key === 'Enter'){
        console.log('Enter off')
    }else if (event.key === 'Escape'){
        console.log('ESC off')
    }else{
        console.log(event.key + 'off')
    }
})

   - keydown 은 키를 눌렀을때, keyup은 키를 뗐을때 발생합니다.

   - event 객체를 받아 event.key로 어떤 키 버튼을 눌렀는지 확인이 가능합니다.

 

 

 

 

폼관련 이벤트

inputEls.forEach(el =>{
    el.addEventListener('focus', ()=>{
        formEl.classList.add('active')
    })

    el.addEventListener('blur', ()=>{
        formEl.classList.remove('active')
    })

    // 값이 변경되었을때
    el.addEventListener('input', event =>{
        console.log(event.target.value)
    })

    // 상태가 변경되었을때
    el.addEventListener('change', event =>{
        console.log(event.target.value)
    })
})

formEl.addeventListener('submit', event=>{
   event.preventDefault()
   const data = {
       id : event.target[0].value,
       pw : event.target[1].value
   }
   console.log(data)
})

formEl.addeventListener('reset', event=>{
   console.log(모든 값 초기화)
})

   - input 이벤트

      1) focus : 요소가 포커스 상태일 때 발생하는 이벤트입니다. ( = focusin)

      2) blur : 요소에 포커스가 해제될 때 발생하는 이벤트입니다. ( = focusout)

      3) input : 인풋 요소에 값이 변경될때 마다 적용되는 이벤트입니다.

      4) change : 엔터키를 누르는 등 값이 변경되었거나 포커스해제 등 다양한 상태 변화 시 발생하는 이벤트입니다,

 

   - form 이벤트

      1) submit : 폼 요소에서 submit 버튼을 누르는 경우 발생하는 이벤트입니다.

         > 기본동작으로 submit 이벤트가 지정되어있으므로 preventDefault() 메서드로 기본동작을 막아야 합니다.

      2) reset : 폼 요소에서 reset 버튼을 누르는 경우 발생하는 이벤트입니다.

 

 

 

 

한글 입력 이벤트 중복 방지

const InputEl = document.querySelector('input')

anchorEl.addEventListener('keydown', event =>{
   
   if(event.isComposing) return // 구성여부를 파악하여 구성중이면 종료
   
   if(event.key === 'Enter'){
       const h1El = document.CreateElement('h1')
       h1El.textContent = inputEl.value
       document.body.append(h1El)
   }
})

   - 브라우저 입력기(IME)의 CJK(중국어, 일본어, 한국어) 사용시 이벤트 핸들러가 2번 실행될 수 있습니다.

   - 이는 문자 구성중에 이벤트가 한번 더 실행되는 문제때문에 생기는것입니다.

   - event.isComposing 으로 문자 구성중 여부를 확인하여 함수를 종료시킬 수 있습니다.