[JS] 이벤트 연결 해제
2022. 2. 4. 16:13ㆍJavascript/이벤트
<!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>Document</title>
</head>
<body>
<button id="connect">이벤트 연결</button>
<button id="disconnect">이벤트 해제</button>
<p>이벤트 연결 상태 : 해제</p>
</body>
<script>
document.addEventListener('DOMContentLoaded', () => {
const connect = document.querySelector('#connect');
const disconnect = document.querySelector('#disconnect');
const p = document.querySelector('p');
let flag = false;
connect.addEventListener('click', () => {
if (!flag) {
p.textContent = `이벤트 연결 상태 : 연결`;
flag = true;
}
})
disconnect.addEventListener('click', () => {
if (flag) {
p.textContent = `이벤트 연결 상태 : 해제`
flag = false;
}
})
})
</script>
</html>작년에는 이렇게 구현했었는데 올해는 buttons를 반복문 돌려서 flag로 상태를 변화시켜 보았다!
document.addEventListener('DOMContentLoaded', () => {
const p = document.querySelector('p');
const buttons = document.querySelectorAll('button');
let flag = false;
buttons.forEach(btn => {
btn.addEventListener('click', () => {
if (!flag) {
p.textContent = '이벤트 연결 상태 : 연결';
flag = true;
} else {
p.textContent = '이벤트 연결 상태 : 해제'
flag = false;
}
})
})
})
'Javascript > 이벤트' 카테고리의 다른 글
| [JS] 이벤트 연결 (증가/감소) (0) | 2022.02.05 |
|---|---|
| [JS] reset 버튼 (0) | 2022.01.20 |
| [JS] 체크일때만 링크 활성화 (0) | 2021.11.17 |
| [JS] 우클릭방지 (0) | 2021.11.17 |