쌓고 쌓다

[JavaScript] 이벤트 설정(연결, 해제) 본문

프로그래밍/JavaScript

[JavaScript] 이벤트 설정(연결, 해제)

승민아 2023. 1. 1. 20:44

document.addEventListener('DOMContentLoaded', () => {})의 코드는 

document라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때,

매개변수로 지정한 콜백 함수를 실행하라이다.

 

이벤트 연결

모든 문서 객체는 생성되거나 클릭, 마우스를 올리거나 할때 이벤트가 발생된다.

이 이벤트가 발생할 때 실행할 함수는 addEventListener()를 통해 실행한다.

 

형태는 아래와 같다.

문서 객체.addEventListener(이벤트 이름, 콜백 함수)

 

이벤트가 발생할 때 실행할 함수(콜백 함수)를 이벤트 리스너 또는 이벤트 핸들러라고 부른다.

 

EX) h1 태그를 클릭할때 카운트 해보자.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let counter = 0
            const h1 = document.querySelector('h1')

            h1.addEventListener('click', (event) => {
                counter++
                h1.textContent = `클릭 횟수: ${counter}`
            })
        })
    </script>
</head>

<style>
    h1 {
        user-select: none;
    }
</style>
<body>
    <h1>클릭 횟수: 0</h1>
</body>
</html>

user-select 속성을 non으로 지정하면 해당 태그를 마우스로 드래그를 하지 못하게 한다.

더블 클릭시 글자 전체 선택되는 것을 막기 위함임.

 

 

이벤트 제거

removeEventListener() 메소드를 사용하여 이벤트를 제거한다.

문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)

 

해제할때는 이벤트 리스너 부분에 이벤트를 연결할 때 사용했던 이벤트 리스너를 넣는다.

그래서 보통 이벤트 연결할때 이벤트 리스너는 변수, 상수로 만들어 연결과 해제에 활용한다.

 

EX) 이벤트 연결, 해제

isConnect 변수는 이벤트 리스너가 여러 번 연결되지 않게 활용한다.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let counter = 0
            let isConnect = false

            const h1 = document.querySelector('h1')
            const p = document.querySelector('p')
            const connectButton = document.querySelector('#connect')
            const disconnectButton = document.querySelector('#disconnect')

            const listener = () => {
                h1.textContent = `클릭 횟수: ${counter++}`
            }

            connectButton.addEventListener('click', () => {
                if(isConnect==false){
                    h1.addEventListener('click', listener)
                    p.textContent = '이벤트 연결 상태: 연결'
                    isConnect=true
                }
            })

            disconnectButton.addEventListener('click', () => {
                if(isConnect==true){
                    h1.removeEventListener('click', listener)
                    p.textContent = '이벤트 연결 상태: 해제'
                    isConnect=false
                }
            })
        })
    </script>
</head>

<style>
    h1 {
        user-select: none;
    }
</style>
<body>
    <h1>클릭 횟수: 0</h1>
    <button id="connect">이벤트 연결</button>
    <button id="disconnect">이벤트 해제</button>
    <p>이벤트 연결 상태: 해제</p>
</body>
</html>

 

h1에 removeEventListener로 이벤트 연결 해제를 했다.

저작자표시 비영리 변경금지

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JavaScript] 입력 양식 이벤트1  (0) 2023.01.06
[JavaScript] 키보드 이벤트, 이벤트 리스너 외부로 분리  (0) 2023.01.03
[JavaScript] 문서 객체 가져오기, 생성, 이동, 삭제  (1) 2023.01.01
[JavaScript] DOMContentLoaded 이벤트  (0) 2023.01.01
[JavaScript] 얕은 복사, 깊은 복사  (1) 2022.12.27
'프로그래밍/JavaScript' Related Articles more
Comments