DOM - 이벤트 객체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>이벤트 객체</title>
</head>
<body>
<button>아메리카노</button>
<button>카페라떼</button>
<script>
let menus = document.querySelectorAll("button"); //모든 버튼을 가져옴
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
function handleClick(e) {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = e.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
console.log(e.target);
}
btnAmericano.onclick = handleClick; // btnAmericano을 클릭했을 때 handleClick 함수 실행
btnCaffelatte.onclick = handleClick;
</script>
</body>
</html>
/*
// 위와 동일
function handleClick() {
let currentMenu = event.textContent;
// console.log(currentMenu);
console.log(currentMenu + "를 클릭하셨습니다.");
}
*/e.target;-> 태그 출력 !.textContent;-> 해당 요소의 내용을 그대로 읽어옴'아메리카노', '카페라떼'라는 문자열은e.target안에 담겨있음 !
keydown과 keyup 이벤트
- 키보드를 눌렀을 때 :
keydown - 키보를 떼었을 때 :
keyup
<!DOCTYPE html>
<html>
<body>
<p>키보드를 누르고 놓으면 알림이 표시됩니다.</p>
<script>
document.addEventListener("keydown", function (event) {
console.log("키 다운: " + event.key);
});
document.addEventListener("keyup", function (event) {
console.log("키 업: " + event.key);
});
</script>
</body>
</html>
<--!아래는 on이벤트함수 활용 예제입니다-->
<!DOCTYPE html>
<html>
<body>
<input type="text" id="keyInput">
<script>
var input = document.getElementById("keyInput");
input.onkeydown = function() {
console.log('키 다운');
};
input.onkeyup = function() {
console.log('키 업');
};
</script>
</body>
</html>- jQuery 사용 예제
$(document).on("keydown", function(event) {
console.log("키 다운: " + event.key);
});
$(document).on("keyup", function(event) {
console.log("키 업: " + event.key);
});
// Input 예제
$("#keyInput").keydown(function() {
console.log('키 다운');
});
$("#keyInput").keyup(function() {
console.log('키 업');
});mouseover와 mouseout 이벤트
<html>
<body>
<div id="hoverMe" style="width: 200px; height: 100px; background-color: yellow;">
여기에 마우스를 가져다 대세요.
</div>
<script>
var element = document.getElementById("hoverMe");
element.addEventListener("mouseover", function() {
console.log('마우스 오버');
});
element.addEventListener("mouseout", function() {
console.log('마우스 아웃');
});
</script>
</body>
</html>
<--!아래는 on이벤트함수 활용 예제입니다-->
<!DOCTYPE html>
<html>
<body>
<div id="hoverMe" style="width: 200px; height: 100px; background-color: yellow;">
여기에 마우스를 가져다 대세요.
</div>
<script>
var div = document.getElementById("hoverMe");
div.onmouseover = function() {
console.log('마우스 오버');
};
div.onmouseout = function() {
console.log('마우스 아웃');
};
</script>
</body>
</html>- jQuery 사용 예제
$("#hoverMe").mouseover(function() {
console.log('마우스 오버');
});
$("#hoverMe").mouseout(function() {
console.log('마우스 아웃');
});
load 이벤트
<!DOCTYPE html>
<html>
<body>
<p>이 페이지가 로드되면 콘솔에 메시지가 표시됩니다.</p>
<script>
window.addEventListener("load", function() {
console.log('페이지 로드 완료');
});
</script>
</body>
</html>
<--!아래는 on이벤트함수 활용 예제입니다-->
<!DOCTYPE html>
<html>
<body>
<script>
window.onload = function() {
console.log('페이지 로드됨');
};
</script>
</body>
</html>- jQuery 사용 예제
$(window).on("load", function() {
console.log('페이지 로드 완료');
});
// onLoad는 문서 전체가 아닌 특정 요소에 대해서는 jQuery에서 직접적으로 지원하지 않습니다.
// 대신, DOM이 준비되었을 때 실행되는 $(document).ready()를 사용할 수 있습니다.
$(document).ready(function() {
console.log('문서 준비됨');
});
scroll 이벤트
<!DOCTYPE html>
<html>
<body>
<div style="height: 1000px">
이 페이지를 스크롤하면 콘솔에 메시지가 표시됩니다.
</div>
<script>
window.addEventListener("scroll", function() {
console.log('스크롤 발생');
});
</script>
</body>
</html>
<--!아래는 on이벤트함수 활용 예제입니다-->
<!DOCTYPE html>
<html>
<body>
<div id="scrollable" style="width: 100%; height: 100px; overflow: auto;">
<div style="height: 500px;">
스크롤해 보세요.
</div>
</div>
<script>
var scrollableDiv = document.getElementById("scrollable");
scrollableDiv.onscroll = function() {
console.log('스크롤 발생');
};
</script>
</body>
</html>- jQuery 사용 예제
$(window).scroll(function() {
console.log('스크롤 발생');
});
// 특정 요소에 대한 스크롤 이벤트
$("#scrollable").scroll(function() {
console.log('스크롤 발생');
});
클릭 이벤트
<!DOCTYPE html>
<html>
<body>
<button id="clickMe">클릭하세요</button>
<script>
document.getElementById("clickMe").addEventListener("click", function() {
alert('버튼 클릭됨!');
});
</script>
</body>
</html>
<--!아래는 on이벤트함수 활용 예제입니다-->
<!DOCTYPE html>
<html>
<body>
<button id="clickButton">클릭하세요</button>
<script>
var button = document.getElementById("clickButton");
button.onclick = function() {
console.log('버튼 클릭됨');
};
</script>
</body>
</html>- jQuery 사용 예제
$("#clickMe").click(function() {
alert('버튼 클릭됨!');
});
// 또는 on 메소드를 사용
$("#clickButton").on("click", function() {
console.log('버튼 클릭됨');
});
백엔드 개발자