7.1.2 마우스(Mouse)와 관련된 이벤트 핸들러 속성
웹 환경에서 가장 많이 사용하는 입력장치 중에 하나인 마우스(mouse)와
관련된 이벤트들 중에 주요 이벤트와 이와 관련된 이벤트 핸들러 속성을 정리하면 다음과 같습니다.
|
이벤트 핸들러 속성 |
설명 |
|
onclick |
마우스를 클릭하면 발생하는 click 이벤트 처리 |
|
ondblclick |
마우스를 더블 클릭하면 발생하는 click 이벤트 처리 |
|
onmousedown |
마우스의 버튼이 눌려질 때 발생하는 mousedown 이벤트 처리 |
|
onmousemove |
마우스의 포인터가 움직일 때 발생하는 mousemove 이벤트 처리 |
|
onmouseout |
마우스 포인터가 요소 밖으로 벗어났을 때 발생하는 mouseout 이벤트 처리 |
|
onmouseover |
마우스 포인터가 요소를 지나갈 때 발생하는 mouseover 이벤트 처리 |
|
onmouseup |
눌렸던 마우스 버튼이 올라올 때 발생하는 mouseup 이벤트 처리 |
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>mouse event 예제 </title>
<script
type="text/javascript">
function mousemoveFunc() {
alert('마우스의 포인터가 이동중...');
}
function dblclickFunc() {
alert('링크를 더블클릭했습니다.');
}
</script>
</head>
<body>
<img src="flower2.jpg"
onmouseup="alert('눌려진 마우스 버튼이 올라옵니다.')"
onmousemove="mousemoveFunc()"/><br/>
<a href="#"
ondblclick="dblclickFunc()"> 제 블로그로 이동</a>
</body>
</html>
위에서 img 요소에 onmouseup 이벤트 핸들러 속성에 직접 javaScript 코드를 연결하여 mouseup 이벤트가 발생하면
“눌려진 마우스 버튼이 올라옵니다.” 알림창이 뜨도록 하고 mousemove 이벤트가 발생할 때 알림창에 “마우스의 포인터가
이동중...”라는 메시지를 표시하도록 코드를 작성합니다. 다음으로 a 요소를 마우스로 더블클릭(dblclick)하면 알림창에 “링크를 더블클릭했습니다.”라는 메시지를 표시하도록 합니다.
“mouseEvent.html”로 저장한 후 IE9를 이용하여 열고 마우스를 이미지 위로
이동하면 다음과 같이 “마우스의 포인터 이동중…”이라는 알림창이
나타나게 됩니다.
확인 버튼을
클릭하여 알림창을 닫은 후 제 블로그로 이동을 더블 클릭하면 다시 “링크를 더블클릭했습니다.” 메시지를 알림창에 나타내게 됩니다. 비슷한 방법으로 mouseout, mousedown 이벤트에 대해서도 여러분들이 코드를 작성해보기 바랍니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.1.4 폼(Form)과 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
|---|---|
| 7.1.3 키보드(Keyboard)와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
| 7.1.1 window와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
| 7. 이벤트(Event)와 이벤트 핸들러(EventHandler) (0) | 2013.08.06 |
| 6.6 해쉬 테이블(HashTable) (0) | 2013.08.06 |
