이벤트 설정하기
문서객체.addEventListener( 이벤트명, 콜백함수=이벤트핸들러 )
h1.addEventListener( 'click', ()=>{
추가할 이벤트 내용ㅇㅇㅇㅇㅇㅇ
})
이벤트 제거하기
문서객체.removeEventListener( 이벤트명, 콜백함수=이벤트핸들러 )
h1.removeEventListener( 'click', ()=>{
제거할 내용 / 변경할 내용ㅇㅇㅇㅇㅇ
})
<script>
document.addEventListener('DOMContentLoaded',()=>{
let counter = 0
const h1= document.querySelector('h1')
h1.addEventListener('click',(event)=>{
counter ++
h1.textContent = `클릭 횟수 :${counter}`
})
})
</script>
<body>
<hr></hr>
<h1> 클릭 횟수 : 0 </h1>
<hr></hr>
</body>
coount의 초기화값으로 =0을 넣어준 뒤,
클릭이벤트가 실행되면 count++로 1씩 증가하게 하는 event를 생성한다
그 뒤에는 h1태그애 count를 추가해준다
==> 클릭할 때마다 h1의 클릭횟수가 1씩 증가한다
<script>
document.addEventListener('DOMContentLoaded',()=>{
let counter = 0
let isConnect = false
// 한꺼번에 event가 실행되지 않게 조건을 걸어줄 ...;; 준비같은...
const h1 = document.querySelector('h1')
const p = document.querySelector('p')
const connectButton = document.querySelector('#connect')
const disconnectButton = document.querySelector('#disconnect')
const listener = (event)=> {
h1.textContent= `클릭 횟수 : ${counter++}`
} // listener 변수에
// h1을 눌렀을 때, count가 올라가는 함수를 담아둔다
connectButton.addEventListener('click',()=>{ // 이벤트연결 버튼을눌렀을 때,
if(isConnect === false){
h1.addEventListener('click', listener) // h1에 listener함수 연결됨
p.textContent='이벤트 연결 상태 : 연결' // p에 연결 글자 추가
isConnect = true
}
})
disconnectButton.addEventListener('click',()=>{ // 이벤트연결 버튼을눌렀을 때,
if(isConnect === true){
h1.removeEventListener('click', listener) // h1에 event제거 + listener함수도 제거
h1.textContent= '클릭 횟수 : 0' // 0 으로 초기화 text추가
p.textContent = '이벤트 연결 상태 : 해제' // 해제 text도 추가
isConnect = false
}
})
})
</script>
<style>
h1{user-select: none;}
</style>
<body>
<hr></hr>
<h1> 클릭 횟수 : 0 </h1>
<button id="connect">이벤트연결</button>
<button id="disconnect">이벤트해제</button>
<p>이벤트 연결 상태: 해제</p>
</body> |
 |
이벤트 연결 버튼을 누르고 h1의 클릭횟수를 누르면 conter가 증가하고
아래 연결 상태의 문구가 '연결'로 바뀐다
이벤트 해제 버튼을 누르면 h1의 클릿횟수는 0으로 초기화되고
이벤트 연결 상태의 문구가 '해제'로 바뀐다
'개발공부_Blog > JavaScript' 카테고리의 다른 글
| javascript - if (0) | 2021.12.21 |
|---|---|
| javascript - addEventListener('keyup',~ (0) | 2021.12.19 |
| javascript - createElement / appendChild / removeChild (0) | 2021.12.19 |
| javascript - style.backgroundColor = 'red' (0) | 2021.12.19 |
| javascript - setAttribute / getAttribute메소드 (0) | 2021.12.19 |
댓글