프론트엔드/Javascript
[Javascript] 마우스 이벤트 mouse event
jinwanseo
2021. 5. 21. 23:42
728x90
[자바스크립트] 마우스 이벤트 모음 Mouse Events
mouseover : 해당 엘리먼트 위에 마우스 커서가 진입한 순간 이벤트 발생
mouseout : 해당 엘리먼트 위에서 마우스 커서가 이탈하는 순간 이벤트 발생
mousedown : 해당 엘리먼트 위에서 마우스 버튼을 클릭하는 순간 이벤트 발생
mouseup : 해당 엘리먼트 위에서 마우스 버튼 클릭 후 떼는 순간 이벤트 발생
mousemove : 해당 엘리먼트 위에서 마우스의 커서가 움직이는 동안 이벤트발생
샘플 예제
<!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>mouse events</title>
<style>
.container {
width : 500px;
height: 500px;
margin : 30px;
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
const container = document.querySelector('.container');
//마우스 진입 이벤트 mouseover
container.addEventListener('mouseover',e=>{
console.log('마우스 진입 이벤트 발생!');
});
//마우스 이탈 이벤트 mouseout
container.addEventListener('mouseout',e=>{
console.log('마우스 이탈 이벤트 발생!');
});
//마우스 버튼 on 이벤트 mousedown
container.addEventListener('mousedown',e=>{
console.log('마우스 버튼 ON 이벤트 발생!');
});
//마우스 버튼 off 이벤트 mousedown
container.addEventListener('mouseup',e=>{
console.log('마우스 버튼 OFF 이벤트 발생!');
});
//마우스 움직임 이벤트 발생 mousemove
container.addEventListener('mousemove',e=>{
console.log('마우스 커서 움직임 이벤트 발생!');
});
</script>
</body>
</html>출력 결과
728x90