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>'컴퓨터 프로그래밍 > JQuery' 카테고리의 다른 글
| addClass() (0) | 2020.05.30 |
|---|---|
| form fields-input (0) | 2020.05.30 |
| key event-keyup(), textarea:maxlength (0) | 2020.05.30 |
| hide(), show()-hover(), mouseenter(), mouseleave() (0) | 2020.05.30 |
| click()- 간단한calulator 구현, unbinding (0) | 2020.05.29 |