[jQuery] 제이쿼리 이벤트
필그램
·2017. 11. 10. 03:50
[jQuery Event]
<script type="text/javascript">
$(function() {
$("#evtTarget").on("mouseover mouseleave", highlight);
$("#evtTarget").on("click", function () {
$("#evtTarget").off("mouseover mouseleave", highlight);
$("#evtTarget").html("<p>Hover Effect Shut Off</p>");
$("#evtTarget").removeClass("highlighted");
})
$("textEntry").on("keypress", function (evt) {
$("#keyPress").text(String.fromCharCode(evt.charCode));
})
});
function highlight() {
$("#evtTarget").toggleClass("highlighted");
}
</script>
<style type='text/css'>
.highlighted {
background-color: Red;
}
</style>
제이쿼리 on /off에 대한 API 입니다.
http://api.jquery.com/on/
http://api.jquery.com/category/events/event-handler-attachment/ 에 들어있는 내용중 on /off 연습입니다.
[html]
<body>
<h1>Binding and Unbinding Events Example</h1>
<div id="content">
<p>jQuery</p>
<div id="evtTarget" class="box"> 마우스 오버 </div>
<p>Type in this text field</p>
<input id="textEntry" type="text" />
<p>Last character typed: <span id="keyPress"></span></p>
</div>
</body>
스크립트 적용뒤, 처음에는 마우스 오버시, 배경이 빨간색으로 되며,
클릭한 다음에는
다음과 같이 나옵니다.
스크립트 마지막의 다음 부분은 내용 입력시, 페이지 표기되는 스크립트입니다.
$("textEntry").on("keypress", function (evt) {
$("#keyPress").text(String.fromCharCode(evt.charCode));
})
var res = String.fromCharCode();
는 자바스크립트로서 ()의 내용을 저장하거나 표기됩니다.
[예]
var res = String.fromCharCode(65);
[결과] - Unicode number 로..
A
반응형
'프로그래밍 > 웹프로그래밍' 카테고리의 다른 글
| [jQuery] encodeURIComponent() 사용법 (0) | 2017.11.13 |
|---|---|
| [jQuery] 제이쿼리 Event Helpers 사용하기 (0) | 2017.11.10 |
| [jQuery] 제이쿼리 강좌를 시작하며.. (0) | 2017.11.10 |
| [jQuery] 제이쿼리 연습문제3 (0) | 2017.11.10 |
| [jQuery] 제이쿼리 DATA (0) | 2017.11.06 |
