컴퓨터 프로그래밍/JQuery

on(), click(), one()-clone(), appendTo()

깝돌이 2020. 5. 30. 11:48

on()과 click()을 차이_1

on()과 click()을 차이_2

on()과 click()을 차이_1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>on()=click|one()</title>
<style type="text/css">
		div{
	border: 1px solid red;
	border-radius: 10px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	//click()은 처음에 존재했던 것만 이벤트가 생깁니다. 
	//on()은 새로 생겨난 것에도 클릭 이벤트가 적용 됩니다. 
	//one은 한번만 이벤트를 실행합니다. 
/* 	$('div').on('click', function(){
		//해당 영역을 복제해서 body에 붙인다...
	$(this).clone().appendTo('body');
	}); */
	$('div').one('click', function(){
		//해당 영역을 복제해서 body에 붙인다...
	$(this).clone().appendTo('body');
	});

});
</script>
</head>
<body>
	<div>
		<h1>$(selector).on()</h1>
		<p>on() 함수 사용하기:: 클릭함수와 동일하게 사용...</p>
	</div>
</body>
</html>

on()과 click()을 차이_2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>on():미래에 존재할 태그에 이벤트를 적용</title>
<style type="text/css">
 	div{
 border: 1px solid red;
 border-radius: 10px;
 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('div').click(function(){
		$('p').append('<h2 id = hello>Encore Academy</h2>');
	})
	//on()처음에는 없었지만 나중에 동적으로 생성될 태그에 이벤트 적용 가능
	$('div').on('click','#hello', onhello);
});
function onhello(){
	alert("on() hello...Calling")
}
</script>
</head>
<body>
		<div>
		<h1>$(selector).on()</h1>
		<p>on() 함수 사용하기:: 클릭함수와 동일하게 사용...</p>
		</div>
</body>
</html>