간단히 사용해보는 html 클릭 이벤트 정리 -YEOL

 

 

일반적으로 웹을 사용할 때 마우스는 필수적인 요소입니다. 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">

 

이상 간단하게 정리한 마우스 클릭관련 이벤트였습니다. 성실한 코딩 하세요.