자바스크립트 마우스 이벤트

1. click

해당 요소에서 마우스를 클릭! 했을 때

​

HTML

<div class="outer">
  <div class="inner">  
    <p class="text"><p>
  </div> 
</div>

CSS

.outer{
  width : 500px;
  height : 200px;
  background-color : black;
  display : flex;
  justify-content : center;
  align-items : center;
}

.inner{
  width : 100px;
  height : 100px;
  background-color : pink;
}

.text {
  color : white;
}

JS

const div = document.querySelector('.outer');

let text = document.querySelector('.text');

let num = 1;
div.addEventListener('click', ()=> {
  text.innerHTML = `클릭! ${num}`;
  num++;
});

https://codepen.io/yeleepark/pen/MWmvqpZ

 

2. dblclick

해당 요소에서 마우스를 더블 클릭! 했을 때

HTML

<div class="outer">
  <div class="inner">  
    <p class="text"><p>
  </div> 
</div>

CSS

.outer{
  width : 500px;
  height : 200px;
  background-color : black;
  display : flex;
  justify-content : center;
  align-items : center;
}

.inner{
  width : 100px;
  height : 100px;
  background-color : pink;
}

.text {
  color : white;
}

JS

const div = document.querySelector('.outer');

let text = document.querySelector('.text');

let num = 1;
div.addEventListener('dblclick', ()=> {
  text.innerHTML = `더블클릭! ${num}`;
  num++;
});

 

3. mousedown / mouseup

해당 요소에서 마우스가 눌러진 상태일 때 / 떼었을 때

HTML

<div class="outer">
  <div class="inner">  
    <p class="text"><p>
  </div> 
</div>

CSS

.outer{
  width : 500px;
  height : 200px;
  background-color : black;
  display : flex;
  justify-content : center;
  align-items : center;
}

.inner{
  width : 100px;
  height : 100px;
  background-color : pink;
}

.text {
  color : white;
}

JS

const div = document.querySelector('.outer');

let text = document.querySelector('.text');

div.addEventListener('mousedown', ()=> {
  text.innerHTML = `마우스 누르는중 `;
});

div.addEventListener('mouseup', ()=> {
  text.innerHTML = `마우스 뗌! `;
});

https://codepen.io/yeleepark/pen/XWRaPPW

XWRaPPW

 

 

5. mousemove

해당 요소에서 마우스가 움직일 때

HTML

<div class="outer">
  <div class="inner">  
    <p class="text"><p>
  </div> 
</div>

CSS

.outer{
  width : 500px;
  height : 200px;
  background-color : black;
  display : flex;
  justify-content : center;
  align-items : center;
}

.inner{
  width : 100px;
  height : 100px;
  background-color : pink;
}

.text {
  color : white;
}

JS

const div = document.querySelector('.outer');

let text = document.querySelector('.text');

let num = 1;
div.addEventListener('mousemove', ()=> {
  text.innerHTML = `move ~~ ${num}`;
  num++;
});

https://codepen.io/yeleepark/pen/BaRdOOx

 

 

6. mouseover

해당 요소에서 마우스가 요소 안으로 들어올 때

현재 블랙 div에 이벤트가 걸려있는데 자식요소인 핑크 div에도 버블링 되네요,,

HTML

<div class="outer">
  <div class="inner">  
    <p class="text"><p>
  </div> 
</div>

CSS

outer{
  width : 500px;
  height : 200px;
  background-color : black;
  display : flex;
  justify-content : center;
  align-items : center;
}

.inner{
  width : 100px;
  height : 100px;
  background-color : pink;
}

.text {
  color : white;
}

JS

const div = document.querySelector('.outer');

let text = document.querySelector('.text');

let num = 1;
div.addEventListener('mouseover', ()=> {
  text.innerHTML = `mouseover ${num}`;
  num++;
});

https://codepen.io/yeleepark/pen/WNjEgga

 

 

7. mouseout

해당 요소에서 마우스가 요소 밖으로 나갔을 때

현재 블랙 div에 이벤트가 걸려있는데 자식요

소인 핑크 div에도 버블링 되네요,,,,

HTML

<div class="outer">
  <div class="inner">  
    <p class="text"><p>
  </div> 
</div>

CSS

.outer{
  width : 500px;
  height : 200px;
  background-color : black;
  display : flex;
  justify-content : center;
  align-items : center;
}

.inner{
  width : 100px;
  height : 100px;
  background-color : pink;
}

.text {
  color : white;
}

JS

const div = document.querySelector('.outer');

let text = document.querySelector('.text');

let num = 1;
div.addEventListener('mouseout', ()=> {
  text.innerHTML = `mouseout ${num}`;
  num++;
});

https://codepen.io/yeleepark/pen/mdmMGzq

 

 

8. mouseenter

해당 요소 밖에서 마우스가 안으로 들어왔을 때!

mouseover와 차이점은 자식 요소에는 동작하지 않는다는 점!

현재 블랙 div에 mouseenter 이벤트가 적용되어 있으므로 자식 요소인 핑크 div에는 이벤트가 적용 안 되는 것을 확인 가능하죠 ,,

HTML

<div class="outer">
  <div class="inner">  
    <p class="text"><p>
  </div> 
</div>

CSS

.outer{
  width : 500px;
  height : 200px;
  background-color : black;
  display : flex;
  justify-content : center;
  align-items : center;
}

.inner{
  width : 100px;
  height : 100px;
  background-color : pink;
}

.text {
  color : white;
}

JS

const div = document.querySelector('.outer');

let text = document.querySelector('.text');

let num = 1;
div.addEventListener('mouseenter', ()=> {
  text.innerHTML = `mouseenter ${num}`;
  num++;
});

https://codepen.io/yeleepark/pen/NWjvLOO

 

9. mouseleave

해당 요소에서 마우스가 밖으로 나갔을 때!

mouseout과 차이점은 자식요소에서는 동작하지 않는다는 점!

현재 블랙 div에 mouseenter 이벤트가 적용되어 있으므로 자식 요소인 핑크 div에는 이벤트가 적용 안 되는 것을 확인 가능

HTML

<div class="outer">
  <div class="inner">  
    <p class="text"><p>
  </div> 
</div>

CSS

.outer{
  width : 500px;
  height : 200px;
  background-color : black;
  display : flex;
  justify-content : center;
  align-items : center;
}

.inner{
  width : 100px;
  height : 100px;
  background-color : pink;
}

.text {
  color : white;
}

JS

const div = document.querySelector('.outer');

let text = document.querySelector('.text');

let num = 1;
div.addEventListener('mouseleave', ()=> {
  text.innerHTML = `mouseleave ${num}`;
  num++;
});

https://codepen.io/yeleepark/pen/abWyaRd

 

10. contextmenu

마우스 우클릭을 했을 때!

HTML

 

CSS

 

JS