일반적으로 웹을 사용할 때 마우스는 필수적인 요소입니다. html에서는 마우스에 관련된 이벤트를
여러 가지 지원하는데 그 이벤트들을 유용한 것들 위주로 모아놓았습니다.
-마우스 클릭 이벤트 모음
- onclick
사용자가 해당 요소를 클릭할 경우 지정된 이벤트가 발생합니다.
<button onclick="function()">Click Here</button>
-oncontextmenu
사용자가 해당 요소에서 마우스를 우클릭할 경우 지정된 이벤트가 발생합니다.
<div oncontextmenu="function()" contextmenu="menu">
-ondblclick
사용자가 해당 요소를 두 번 연속으로 클릭할 경우 이벤트가 발생합니다.
<div ondblclick="function()">Double Click</div>
-onmousedown ●
사용자가 해당 요소 위에서 마우스를 눌렀을 경우 이벤트가 발생합니다.
<div onmousedown="function()">Click Here</div>
-onmouseup ●
사용자가 해당 요소 위에서 마우스를 누른 손가락을 떼었을 경우 이벤트가 발생합니다.
<div onmouseup="function()">Click Here</div>
-onmouseenter ●
사용자의 마우스 포인터가 해당 요소로 안으로 이동했을 경우 이벤트가 발생합니다.
<img onmouseenter="funcEnter()" src="small.gif" alt="small">
-onmouseleave ●
사용자의 마우스 포인터가 해당 요소로 밖으로 이동했을 경우 이벤트가 발생합니다.
<img onmouseleave="funcLeave()" src="Big.gif" alt="Big">
-onmousemove
사용자의 마우스 포인터가 해당 요소 위에서 이동할 때 이벤트가 발생합니다.
<div onmousemove="func()">Move Over Here</div>
-onmouseover ●
사용자의 마우스 포인터가 해당 요소 또는 해당 요소의 하위 요소 중 하나의 안으로 이동될 때 이벤트가 발생합니다.
<img onmouseover="bigImg()" src="big.gif" alt="big">
-onmouseout ●
사용자의 마우스 포인터가 해당 요소 또는 해당 요소의 하위 요소 중 하나의 밖으로 이동될 때 이벤트가 발생합니다.
<img onmouseout="smallImg()" src="small.gif" alt="small">
이상 간단하게 정리한 마우스 클릭관련 이벤트였습니다. 성실한 코딩 하세요.
