[jquery] 이벤트 핸들링
필그램
·2017. 11. 1. 03:19
다음과 같은 이벤트를 실행하려 합니다.
1. 상자안에 마우스 위치 나오게 하기
2. 마우스 클릭시 위치 표시
3. 마우스가 상자 밖에 나갔을때 'mouseleave'라고 표기하기
$("document").ready(function() {
$("#example").on("mousemove", onMouseOver);
$("#example").on("click", onMouseClick);
$("#example").on("mouseleave", onMouseLeave);
});
example 아이디에 on() 메소드를 실행하라는 것입니다.
사용법: $(selector).on(event,childSelector,data,function,map)
여기서 event 와 function은 필수 입니다.
"mouseover" = event 이고,
onMouseOver 는 실행할 function입니다.
function onMouseOver(evt) {
$("#example").text(evt.type + ": " + evt.pageX + ", " + evt.pageY + "\n" +
"Button: " + evt.which + " Key: " + evt.metaKey);
}
다음은 onMouseOver 펑션인데,
아이디 example에 텍스트로 뒤의 내용을 쓰라는 내용입니다.
function onMouseClick(evt) {
$("#example").text(evt.type + ": " + evt.pageX + ", " + evt.pageY);
$("#example").off("mousemove", onMouseOver);
}
마우스 클릭의 펑션이고, 클릭하면 내용이나오고
다음줄은 마우스 이동시 off하는 것입니다.
function onMouseLeave(evt) {
$("#example").text("mouseleave");
}
마우스 빠져나갈때의 펑션입니다.
전체 코드입니다.
<html>
<head>
<title>jQuery 이벤트 핸들링</title>
<link rel="stylesheet" href="../style.css" />
<meta charset="utf-8">
<script type="text/javascript" src="../jquery-3.0.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#example").on("mousemove", onMouseOver);
$("#example").on("click", onMouseClick);
$("#example").on("mouseleave", onMouseLeave);
});
function onMouseOver(evt) {
$("#example").text(evt.type + ": " + evt.pageX + ", " + evt.pageY + "\n" +
"Button: " + evt.which + " Key: " + evt.metaKey);
}
function onMouseClick(evt) {
$("#example").text(evt.type + ": " + evt.pageX + ", " + evt.pageY);
$("#example").off("mousemove", onMouseOver);
}
function onMouseLeave(evt) {
$("#example").text("mouseleave");
}
</script>
</head>
<body>
<h1>jQuery 이벤트 핸들링</h1>
<div id="content">
<p>jQuery 실행</p>
<div id="example">
</div>
</div>
</body>
</html>
css는 이전의 게시글의 것을 사용하면 됩니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 애니메이션 구현하기 (0) | 2017.11.01 |
|---|---|
| [jQuery] 제이쿼리 환경설정 (0) | 2017.11.01 |
| [jquery] 컨텐츠 내용 생성 및 수정 (0) | 2017.11.01 |
| [jQuery] 기본기 갖추기 1 (0) | 2017.11.01 |
| jQuery를 WebStorm(웹스톰)에 설정하기 (0) | 2017.11.01 |
