JavaScript(13)

박찬영·2024년 1월 18일

JavaScript

목록 보기

13/19

1. addEventListener

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


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

2. addEventListener의 이점

• 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다.
• 같은 리스너(타겟)에 대해 다수의 핸들러를 등록할 수 있다.

3. 이벤트 객체

• 이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터이다. 
• 이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추구하여 이벤트 발생 시마다 전달받을 수 
  있도록 해야 한다.

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

4. 실습

1) html 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>자바스크립트 실습</title>
    </head>
    <body>
        <button id="one">버튼1</button>
        <button id="two">버튼2</button>
        <button id="three">버튼3</button>
        <script src="script.js"></script>
    </body>
</html>

2) js 코드

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

const handleClick1 = function(){
    console.log("클릭되었습니다")
}

btn1.addEventListener('click', handleClick1)
btn1.addEventListener('click', function(){
    console.log("또 다른 핸들러가 추가되었다")
})

btn1.removeEventListener('click',handleClick1)



const handleClick2 = function(event){
    console.log(event.target)
}

btn2.addEventListener('click', handleClick2)
btn3.addEventListener('click', handleClick2)