js_mouse(Event)

click	클릭했을 때 발생
dblclick	더블 클릭했을 때 발생
mousedown	마우스를 누를 때 발생
mouseup	마우스버튼을 땔 때 발생
mousemove	마우스를 움직일 때 발생
mouseover	마우스가 엘리멘트에 진입할 때 발생
mouseout	마우스가 엘리멘트에 빠져나갈 때 발생
contextmenu	컨텍스트 메뉴가 실행될 때 발생

 

예시

 

<div id="target"></div>
<table>
<tr>
    <td>event type</td>
    <th>info</th>
</tr>
 
<tr>
    <td>click</td>
    <td id = "elmclick"></td>
</tr>
 
<tr>
    <td>dblclick</td>
    <td id = "=elmdblclick"></td>
</tr>
 
<tr>
<td>mousedown</td>
    <td id = "elmmousedown"></td>
</tr>
 
<tr>
<td>mouseup</td>
    <td id = "elmmouseup"></td>
</tr>
 
<tr>
<td>mousemove</td>
    <td id = "elmmousemove"></td>
</tr>
 
<tr>
<td>mouseover</td>
    <td id = "elmmouseover"></td>
</tr>
 
<tr>
<td>mouseout</td>
    <td id = "elmmouseout"></td>
</tr>
</table>
 
<script>
    let t = document.getElementById("target");
    
    t.addEventListener('click',handler);
    t.addEventListener('dblclick',handler);
    t.addEventListener('mousedown',handler);
    t.addEventListener('mouseup',handler);
    t.addEventListener('mousemove',handler);
    t.addEventListener('mouseover',handler);
    t.addEventListener('mouseout',handler);
    t.addEventListener('contextmenu',handler);
    
    function handler(event){
        console.log('----------------------');
        console.log(event.type);    
    }
        
</script>