26. 이벤트
2024. 11. 6. 16:12ㆍ자바스크립트(Javascript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트</title>
<script>
let btn //btn 전역으로 다 쓸수 있게 빼준다
window.onload = function(){
const text = document.getElementById('text')
// <p id="text"></p>
text.innerHTML = "<b style='color:deeppink;'>HTML 문서가 로드되었습니다.</b>"
btn = document.getElementById('eventBtn')
btn.addEventListener('click', clickBtn)
btn.addEventListener('mouseover', mouseOverBtn)
btn.addEventListener('mouseout', mouseOutBtn)
const delbtn = document.getElementById('delBtn')
delbtn.addEventListener('click', delEvent)
const btn1 = document.getElementById('btn1')
const btn2 = document.getElementById('btn2')
const btn3 = document.getElementById('btn3')
btn1.addEventListener('click', buttonClick)
btn2.addEventListener('click', buttonClick)
btn3.addEventListener('click', (e) => {
console.log('버튼 3이 눌렸어요!')
})
}
function changeText(el){
// console.log(el)
el.innerHTML = "<b style='color:deepskyblue;'>문자열이 변경되었습니다.</b>"
}
// e: 이벤트 객체
function clickBtn(e){
console.log(e)
console.log(e.target)
console.log(e.target.id)
console.log(e.target.value)
console.log(e.target.type)
document.getElementById('text').innerHTML = '<b>버튼을 클릭했어요!</b>'
}
function mouseOverBtn(){
document.getElementById('text').innerHTML = '<b>버튼위에 커서가 올라갔어요!</b>'
}
function mouseOutBtn(){
document.getElementById('text').innerHTML = '<b>버튼 밖으로 커서가 나갔어요!</b>'
}
function buttonClick(e){
switch(e.target.id){
case 'btn1':
console.log('버튼 1이 눌렸어요!')
break
case 'btn2':
console.log('버튼 2가 눌렸어요!')
break
}
}
function delEvent(){
btn.removeEventListener('click', clickBtn)
btn.removeEventListener('mouseover', mouseOverBtn)
btn.removeEventListener('mouseout', mouseOutBtn)
document.getElementById('text').innerHTML = '<b>이벤트 핸들러가 삭제됐어요!</b>'
}
</script>
</head>
<body>
<p id="text"></p>
<p id="p" onclick="changeText(this)">문자열을 클릭하세요</p>
<hr>
<p><button id="eventBtn" value="이벤트 버튼">이벤트 버튼</button> <button id="delBtn">이벤트 삭제 버튼</button></p>
<hr>
<button type="button" id="btn1">버튼1</button>
<button type="button" id="btn2">버튼2</button>
<button type="button" id="btn3">버튼3</button>
</body>
</html>728x90
LIST
'자바스크립트(Javascript)' 카테고리의 다른 글
| 25. 주민번호 유효성 검사 (0) | 2024.11.06 |
|---|---|
| 25. DOM (0) | 2024.11.04 |
| 24. Navigator 객체 (0) | 2024.11.04 |
| 23. location history 객체 (0) | 2024.11.04 |
| 22. 시계만들기 (0) | 2024.11.04 |