[Javascript] 마우스 이벤트(event) 종류

 

마우스 이벤트의 종류를 알아보고,

각 이벤트들이 언제 어떻게 동작하는지 정리해 보았습니다.

 

0. 마우스 이벤트의 종류
1. click, mousedown, mouseup 
2. dblclick 
3. mousemove 
4. mouseover, mouseout 
5. mouseenter, mouseleave 
6. mouseover, mouseout와 mouseenter, mouseleave 차이점 
7. contextmenu

 

 

0. 마우스 이벤트의 종류

 1. click 

 - 사용자해 해당 element를 클릭했을 때(버튼을 눌렀다가 떼었을 때) 발생 합니다.

 2. mousedown 

 - 사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다.

 3. mouseup 

 - 사용자가 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생합니다.

 4. dblclick 

 - 사용자가 해당 element에서 마우스 버튼을 더블 클릭했을 때 발생합니다.

 5. mousemove 

 - 사용자가 해당 element에서 마우스를 움직였을 때 발생합니다.

6. mouseover 

 - 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다.

 7. mouseout 

 - 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다.

 8. mouseenter 

 - 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다.

 - 버블링이 발생하지 않습니다.

 9. mouseleave 

 - 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다.

 - 버블링이 발생하지 않습니다.

 10. contextmenu 

 - 마우스 오른쪽 버튼을 눌렀을 때 발생합니다.

 

 

1. click, mousedown, mouseup

<div id='my_div'>
</div>
<input id='clearbtn' type='button' value='clear' />
<div id='result'>
</div>

#my_div {
  background: green;
  height: 100px;
  width: 100px;
}

const div = document.getElementById('my_div');
const clearbtn = document.getElementById('clearbtn');
const result = document.getElementById('result');

div.addEventListener('click', (event) => {
  result.innerHTML+= '<div>click</div>';
});

div.addEventListener('mousedown', (event) => {
  result.innerHTML+= '<div>mousedown</div>';
});

div.addEventListener('mouseup', (event) => {
  result.innerHTML+= '<div>mouseup</div>';
});

clearbtn.addEventListener('click', (event) => {
  result.innerHTML= '';
});

 

어떤 element에 click event가 발생하면, 동시에 mousedown, mouseup 이벤트도 발생합니다.

사용자가 마우스를 누르면 mousedown 이벤트가 발생하고,

떼면 mouseup 이벤트가 발생하고,

동시에 click 이벤트도 발생합니다.

 

위 예제의 초록색 <div> 안에는 click, mousedown, mouseup 이벤트가 적용되어 있습니다.

여기서 초록색 <div>를 클릭하면

mousedown, mouseup, click 이벤트가 순서대로 발생하는 것을 확인할 수 있습니다.

 

초록색 <div> 안에서 마우스를 누르고,

마우스를 움직여서 초록색 <div> 밖에서 마우스를 떼면,

mouseup, click 이벤트는 발생하지 않고,

mousedown 이벤트만 발생합니다.

 

반대로, 초록색 <div> 밖에서 마우스를 누르고,

마우스를 움직여서 초록색 <div> 안에서 마우스를 떼면,

mousedown, click 이벤트는 발생하지 않고,

mouseup 이벤트만 발생합니다.

 

 

2. dblclick

<div id='my_div'>
</div>
<input id='clearbtn' type='button' value='clear' />
<div id='result'>
</div>

#my_div {
  background: green;
  height: 100px;
  width: 100px;
}

const div = document.getElementById('my_div');
const clearbtn = document.getElementById('clearbtn');
const result = document.getElementById('result');

div.addEventListener('click', (event) => {
  result.innerHTML+= '<div>click</div>';
});

div.addEventListener('mousedown', (event) => {
  result.innerHTML+= '<div>mousedown</div>';
});

div.addEventListener('mouseup', (event) => {
  result.innerHTML+= '<div>mouseup</div>';
});

div.addEventListener('dblclick', (event) => {
  result.innerHTML+= '<div>dblclick</div>';
});

clearbtn.addEventListener('click', (event) => {
  result.innerHTML= '';
});

 

dblclick 이벤트는 element를 더블클릭 했을 때 일어납니다.

그와 동시에, mousedown, mouseup, click 이벤트도 발생합니다.

 

위 예제의 초록색 <div> 안에는 click, mousedown, mouseup, dblclick 이벤트가 적용되어 있습니다.

초록색 사각형을 더블클릭하면

mousedown, mouseup, click, mousedown, mouseup, click, dblclick

이렇게 6개의 이벤트가 순서대로 발생합니다.

따라서, dblclick 이벤트를 등록해서 사용할 때는,

이렇게 여러개의 이벤트가 동시에 발생한다는 것에 유의하면서 사용해야 합니다.

 

 

3. mousemove

<div id='my_div'>
</div>
<input id='clearbtn' type='button' value='clear' />
<div id='result'>
</div>

#my_div {
  background: green;
  height: 100px;
  width: 100px;
}

const div = document.getElementById('my_div');
const clearbtn = document.getElementById('clearbtn');
const result = document.getElementById('result');

div.addEventListener('mousemove', (event) => {
  result.innerHTML+= '<div>mousemove</div>';
});

clearbtn.addEventListener('click', (event) => {
  result.innerHTML= '';
  count = 0;
});

 

mousemove 이벤트는 element 안에서 마우스를 움직였을 때 발생합니다.

이 이벤트는 마우스가 1픽셀이라도 움직이게 되면 발생하기 때문에,

mousemove 이벤트 사용은 UI를 느리게 합니다.

따라서, 이 이벤트는 꼭 필요한 경우에만 사용하는 것이 좋습니다.

 

 

4. mouseover, mouseout

<div id='my_div'>
</div>
<input id='clearbtn' type='button' value='clear' />
<div id='result'>
</div>

#my_div {
  background: green;
  height: 100px;
  width: 100px;
}

const div = document.getElementById('my_div');
const clearbtn = document.getElementById('clearbtn');
const result = document.getElementById('result');

div.addEventListener('mouseover', (event) => {
  result.innerHTML+= '<div>mouseover</div>';
});

div.addEventListener('mouseout', (event) => {
  result.innerHTML+= '<div>mouseout</div>';
});

clearbtn.addEventListener('click', (event) => {
  result.innerHTML= '';
  count = 0;
});

 

mouseover, mouseout 이벤트는

마우스 커서가 element로 들어갈 때와 나갈때 발생합니다.

 

 

5. mouseenter, mouseleave

<div id='my_div'>
</div>
<input id='clearbtn' type='button' value='clear' />
<div id='result'>
</div>

#my_div {
  background: green;
  height: 100px;
  width: 100px;
}

const div = document.getElementById('my_div');
const clearbtn = document.getElementById('clearbtn');
const result = document.getElementById('result');

div.addEventListener('mouseenter', (event) => {
  result.innerHTML+= '<div>mouseenter</div>';
});

div.addEventListener('mouseleave', (event) => {
  result.innerHTML+= '<div>mouseleave</div>';
});

clearbtn.addEventListener('click', (event) => {
  result.innerHTML= '';
  count = 0;
});

 

mouseenter, mouseleave 이벤트도 mouseover, mouseout 이벤트와 마찬가지로

마우스 커서가 element로 들어갈 때와 나갈때 발생합니다.

 

 

6. mouseover, mouseout와 mouseenter, mouseleave 차이점

mouseover, mouseout와 mouseenter, mouseleave의 차이는 element가 겹쳐있을 때 나타납니다.

 

 mouseover, mouseout 

<div id='out_div'>
  <div id='in_div'></div>
</div>

<input id='clearbtn' type='button' value='clear' />
<div id='result'>
</div>

#out_div {
  background: green;
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#in_div {
  background: yellow;
  height: 50px;
  width: 50px;
  display: inline-block;
}

const div = document.getElementById('out_div');
const clearbtn = document.getElementById('clearbtn');
const result = document.getElementById('result');

div.addEventListener('mouseover', (event) => {
  result.innerHTML+= `<div>mouseover ${event.target.id}</div>`;
});

div.addEventListener('mouseout', (event) => {
  result.innerHTML+= `<div>mouseout ${event.target.id}</div>`;
});

clearbtn.addEventListener('click', (event) => {
  result.innerHTML= '';
  count = 0;
});

 

위 예제는 out_div(초록색 영역)안에 in_div(노란색 영역)가 있고,

out_div에 mouseover, mouseout 이벤트가 등록되어 있습니다.

 

먼저,

초록색 영역에 마우스를 가지고 가면 out_div 영역에 mouseover 이벤트가 발생합니다.

그리고, 노란색 영역으로 마우스를 움직이면,

out_div 영역에 mouseout 이벤트가 발생하고, in_div 영역에 mouseover 이벤트가 발생합니다.

in_div 영역에는 mouseover, mouseout 이벤트가 등록되어 있지 않지만,

mouseover, mouseout의 이벤트 버블링 효과 때문에 

마치 in_div 영역에도 상위 div(out_div)에 적용된 이벤트가 등록된 것처럼 동작하는 것입니다.

 

 mouseenter, mouseleave 

<div id='out_div'>
  <div id='in_div'></div>
</div>

<input id='clearbtn' type='button' value='clear' />
<div id='result'>
</div>

#out_div {
  background: green;
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#in_div {
  background: yellow;
  height: 50px;
  width: 50px;
  display: inline-block;
}

const div = document.getElementById('out_div');
const clearbtn = document.getElementById('clearbtn');
const result = document.getElementById('result');

div.addEventListener('mouseenter', (event) => {
  result.innerHTML+= `<div>mouseenter ${event.target.id}</div>`;
});

div.addEventListener('mouseleave', (event) => {
  result.innerHTML+= `<div>mouseleave ${event.target.id}</div>`;
});

clearbtn.addEventListener('click', (event) => {
  result.innerHTML= '';
  count = 0;
});

 

mouseenter, mouseleave 에서는 이벤트 버블링 효과가 나타나지 않습니다.

in_div(노란색 영역)으로 마우스를 움직여도 mouseenter, mouseleave 이벤트가 발생하지 않고,

오직 out_div(초록색 영역) 밖으로 마우스 커서가 들어가고, 나올때만 이벤트가 발생합니다.

 

 

7. contextmenu

<div id='my_div'>
</div>

<input id='clearbtn' type='button' value='clear' />
<div id='result'>
</div>

#my_div {
  background: green;
  height: 100px;
  width: 100px;
}

const div = document.getElementById('my_div');
const clearbtn = document.getElementById('clearbtn');
const result = document.getElementById('result');

div.addEventListener('contextmenu', (event) => {
  result.innerHTML+= '<div>contextmenu</div>';
});

div.addEventListener('mousedown', (event) => {
  result.innerHTML+= '<div>mousedown</div>';
});

div.addEventListener('mouseup', (event) => {
  result.innerHTML+= '<div>mouseup</div>';
});

clearbtn.addEventListener('click', (event) => {
  result.innerHTML= '';
  count = 0;
});

 

contextmenu 이벤트는 element에서 마우스 오른쪽 버튼을 클릭했을 때 발생합니다.

또한, click 이벤트와 같이 mousedown, mouseup 이벤트도 같이 발생합니다.

 

보통 contextmenu 이벤트를 발생시키면, context 메뉴가 나타납니다.

마우스 오른쪽 버튼을 클릭했을 때, context 메뉴를 보여주지 않으려면

아래의 포스팅을 참조하세요.

[Javascript] 마우스 오른쪽 클릭 금지하는 2가지 방법

 

---

 

마우스를 클릭하거나, 움직였을 때 어떤 이벤트가 발생하는지, 이벤트가 어떻게 동작하는지 알아보았습니다.