[Javascript] 마우스 이벤트

자바스크립트를 이용하여 마우스 이벤트들이 언제 어떻게 동작하는지 알아보겠습니다.

 

마우스 이벤트의 종류

 

mouseover 마우스 포인터를 올렸을 때 입니다.
mouseout 마우스 포인터가 떠날 때
mousedown  마우스 누르는 순간
mouseup 마우스 떼는 순간
mousemove 마우스를 움직였을 때

 

예제를 작성해 보겠습니다.

 

1. html

 <div class="container"></div>

2 .css

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

 

3. js

 consts container = document.querySelector('.container');
        //마우스 진입 이벤트 mouseover
        container.addEventListener('mouseover',e=>{
            console.log('mouseover!');
        }); 
        //마우스 이탈 이벤트 mouseout
        container.addEventListener('mouseout',e=>{
            console.log('mouseout!');
        });
        //마우스 버튼 down 이벤트 mousedown
        container.addEventListener('mousedown',e=>{
            console.log('mousedown!');
        });
        //마우스 버튼 up 이벤트 mousedown
        container.addEventListener('mouseup',e=>{
            console.log('mouseup!');
        }); 
        //마우스 움직임 이벤트 발생 mousemove
        container.addEventListener('mousemove',e=>{
            console.log('mousemove!');
        });

여기까지 마우스 이벤트에 대해서 알아보았습니다.