Develop record

[Javascript] addEventListener 본문

Programming Language/Javascript

[Javascript] addEventListener

seong's log 2024. 1. 14. 02:27

- 이젠에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재 => remove()

- 같은 리스너(타겟)에대해 다수의 핸들러를 등록할 수 있음

-  추가적인 옵션 사항들이 제공

 

이벤트 객체

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

- 이벤트 발생 시, 이벤트 핸들러가 호출 될 때 이벤트 객체가 전달 -> 이벤트 핸들러 함수의 매개변수를 통해 이벤트 객체를 받을 수 있음

// click 이벤트가 발생하면 함수를 호출
target.addEventListener('click',function(){})

// click 이벤트가 발생하면 함수를 호출
// + 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입
target.addEventListener('click',function(event){})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>addEventListener</title>
</head>
<body>
    <h1>addEventListener</h1>
    <button id="one">버튼1</button>
    <button id="two">버튼2</button>
    <button id="three">버튼3</button>

    <script src="event.js"></script>
</body>
</html>
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("또 다른 핸들러가 추가 등록되었다")
})  
//여러개의 이벤트를 다발적으로 등록 가능
//onclick -> 마지막에 동록된 것만 덮어 씌워짐

btn2.removeEventListener('click', handleClick)
//click 이벤트에 대해 handleClick을 제거
//등록된 handler를 제거

const handleClick2 = function(event){   //이벤트 핸들러를 전달 받는 매개변수명 : event, e 많이 사용
    console.log(event.target)   //이벤트가 발생한 순간에 타겟을 알려 줌
}

btn1.addEventListener('click', handleClick2)

 

'Programming Language > Javascript' 카테고리의 다른 글

[Javascript] value, preventDefault  (1) 2024.01.14
[Javascript] createElement, appendChild  (0) 2024.01.14
[Javascript] Event  (0) 2024.01.14
[Javascript]함수  (1) 2024.01.11
[Javascript] For  (0) 2024.01.10
'Programming Language/Javascript' Related Articles more