[JavaScript] Day 17 - 현대적인 이벤트 핸들링을 해볼까?!

addEventListener

onclick, onkeydown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 현대적인 방법은, addEventListener 메소드를 활용하는 것이다.

 

 ex ) 클릭 이벤트 핸들러를 등록하는 경우의 예

target.addEventListener('click', function(){})

 

addEventListener 함수의 이점

• 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다.
• 같은 리스너에 대해 다수의 핸들러를 등록할 수 있다.
• 추가적인 옵션 사항들이 제공된다.

이벤트 객체

이벤트 객체란 '추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터'이다.

이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있도록 해야 한다.

 

오늘의 실습 1

const btn1 = document.getElementById("one")
const btn2 = document.getElementById("two")
const btn3 = document.getElementById("three")

const handleClick = function(){
    console.log("저를 클릭하셨나요?")
}

btn2.addEventListener('click', handleClick)
btn2.addEventListener('click', function(){
    console.log("또 다른 핸들러가 추가 등록되었다!")   // 추가적인 이벤트 동시 가능
})

btn2.removeEventListener('click', handleClick)  // 등록된 이벤트 삭제 가능

실습의 결과 1

오늘의 실습 2

const btn1 = document.getElementById("one")
const btn2 = document.getElementById("two")
const btn3 = document.getElementById("three")

const handleClick = function(event){
    console.log(event.target)  // target 속성 알아보기
}

btn2.addEventListener('click', handleClick)

실습의 결과 2