메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140813_[jquery] 이벤트

2014.09.23 23:24 read.143

.on();, .off();

1.7x 버전 이상 이용시 사용 가능

그 전 버전에서는 bind(), live(), delegate() 로 사용 (delegate() 메소드가 더 빠르다고 함)

on() 메소드는  Ajax 및 html() 함수를 토애 변경된 엘리먼트 이벤트를 최초 로딩 되었을 때나 변경된 후 로딩되었을 때 이벤트 바인딩이 정상적으로 동작한다.

off()는 on으로 등록된 이벤트를 삭제하기 위해 이용


.ready();

window.onload() 이벤트를 대신하여 사용할 수 있는 이벤트

html 파일이 다 읽힌 후에 실행된다.


resize();

윈도우 크기가 바뀔 때 실행

$("window").resize(function(){

    // do somthing

});


예제1

jq_resize_1.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:10px;padding:10px}
			div{margin-bottom:10px;width:180px;height:30px;}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
					$(window).resize(function(){ // 비율로 계산해서 레이아웃배치를 한다. 모바일 , pc 
						var temp=$(window).width();
						$('div').text(temp);
					});
				});
		//]]>
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>


.scroll();

선택한 객체에 스크롤이벤트가 발생하는 것을 감지하고 추가적인 작업을 할 수 있게한다.

window 객체나 overflow 송성값이 scroll 또는 auto인 요소에서 사용할 수 있다.

.scroll( handler );


예제1

jq_scroll_1.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0px;padding:0px}
			div{width:100%;height:1000px;background:red}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$(document).scroll(function(){
					var temp=$(document).height();//높이
					$('div').text(temp);
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>


예제2

jq_scroll_2.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0px;padding:0px}
			div{width:100%;height:1000px;background:red}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$(document).scroll(function(){
					var st=$(window).scrollTop();
					var dh=$(document).height();
					var wh=$(window).height();
					if(st==dh-wh){
						alert("끝");
					}
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>


추가메뉴 목록
위로