마우스 이벤트
웹을 개발하다보면 마우스에대한 이벤트가 필요할경우 종종있다.
호버같은경우는 css로 해결가능하지만 버튼을클릭했을시 배경색이변하거나
제일 맨위로 이동하기같은경우는 css로는 해결하기는어렵고
이럴경우 자바스크립트의 이벤트 기능이용하면된다.
종류는
mousedown/mouseup
mouserover/mouseout
mousemove
click
dblclick
contextmenu
click()
클릭을 했을때 이벤트가 발생하는 이벤트
<style>
.box{
width: 200px;
height: 200px;
border:1px solid red;
}
.on{
background: yellow;
}
</style>
<body>
<div class="box"></div>
<script>
// 클릭 이벤트
let box = document.querySelector('.box');
// box를 클릭하면 on class를 추가하여라
box.addEventListener('click', function(){
box.classList.add('on');
})
</script>
mousedown/mouseup
왼쪽 마우스를 누르고있을땐 mousedown 이벤트
왼쪽 마우스 눌렀다가 뗄땐 mouseup 이벤트가 발생한다.
<script>
// mousedown
document.addEventListener('mousedown', function(e){
let x = e.clientX;
let y = e.clientY;
console.log("마우스 눌렀을 때의 X : ", x);
console.log("마우스 눌렀을 때의 Y : ", y);
});
// mouseup
document.addEventListener('mouseup', function(e){
let x = e.clientX;
let y = e.clientY;
console.log("마우스 눌렀다가 땟을 때의 X : ", x);
console.log("마우스 눌렀을 땟을 때의 Y : ", y);
});
</script>document(문서) 에서 3번의 클릭을 했을경우 좌표값을 나오는것을 확인할수 있음
mouseover/mouseout
마우스가 올라가거나 나가면 이벤트 발생한다.
<style>
.box{
width: 200px;
height: 200px;
background:red;
}
</style>
<div class="box"></div>
<script>
// mouseover
// .box의 박스안에 마우스가 올라가면 메세지 출력
let box = document.querySelector('.box');
box.addEventListener('mouseover',function(){
console.log('box에 마우스가 올라갔습니다.');
});
// mouseout
// .box의 박스안에 마우스가 나가면
box.addEventListener('mouseout',function(){
console.log('box에 마우스가 나갔습니다.');
});
</script>마우스가 .box에 올라가면 이벤트 발생화면
마우스가 .box에 빠져나가면 이벤트 발생화면
dblclick
마우스왼쪽버튼을 더블클릭했을때 이벤트 발생
<style>
.box{
width: 200px;
height: 200px;
background:red;
}
</style>
<div class="box"></div>
<script>
// dblclick
// .box의 박스안에 마우스가 올라가면 메세지 출력
let box = document.querySelector('.box');
box.addEventListener('dblclick',function(){
console.log('더블클릭하였습니다.');
});
</script>더블클릭하면 나오는 화면
contextmenu
오른쪽 마우스 클릭시 이벤트 발생
<style>
.box{
width: 200px;
height: 200px;
background:red;
}
</style>
<div class="box"></div>
<script>
// contextmenu
// .box에 오른쪽마우스 클릭하면 나오는 이벤트
let box = document.querySelector('.box');
box.addEventListener('contextmenu',function(){
console.log('오른쪽 마우스 클릭하였습니다.');
});
</script>
copy
복사하면 발생하는 이벤트
<div>
안녕하세요. <br>
이벤트 실습중입니다<br>
너무어렵네요 허허<br>
복사는 하지말아주세요 ..
</div>
<script>
// copy
// 복사하기 막는 이벤트
let box = document.querySelector('div');
box.addEventListener('copy',function(){
alert("복사하지 말랬지!!!!!!");
});
</script>복사를 하면 나오는 화면
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 - 정규표현식 (0) | 2021.08.14 |
|---|---|
| 자바스크립트 - form 이벤트 (0) | 2021.08.14 |
| 자바스크립트 - WINDOW 객체 (0) | 2021.08.04 |
| 자바스크립트 - 문서 수정 메소드 (0) | 2021.08.03 |
| 자바스크립트 - 주요노드 프로퍼티 (0) | 2021.08.02 |
