문제1) 클릭버튼1개, 중단버튼1개, 한번만버튼1개
클릭버튼을 누르면 클릭횟수가 증가하고, 브라우저로 "클릭 x번 했습니다."를 출력된다.
중단버튼을 누르면 클릭버튼이 비활성화된다.
한번만 버튼을 누르고, 클릭버튼누르면 alert로 "한번만 전달하겠습니다"가 출력된다. (횟수증가 x)
이 코드에서 버튼을 눌럿을 때, 중단되도록 off이벤트를 사용했다.
또한, one이벤트를 이용해서 버튼클릭함수안에서 one이라는 이벤트는 단 한번만 실행되는 함수.
클릭횟수를 증가시키기위하여 함수안에서 cnt라는 변수를 전역변수로 사용함으로써, 버튼이 눌릴때마다 초기화가 되지않고 누적이 되도록한다.
간단하게 버튼이벤트를 이용하는 코드이지만, 추가적으로 함수안에 함수를 넣는 내용들을 조금은 주의깊게 보시기
바랍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title> jquery-이벤트 ['on,off,one,click'] </title>
<script src='jquery-3.2.1.min.js'></script>
<script>
$(document).ready(
function(){
//누를때마다 횟수가 출력되도록
var cnt=0; //전역변수로 사용해야지 클릭할때마다 cnt가 0이 되는것을 방지할 수 있다.
$('#btn1').on('click',
function(){
cnt++;
$('#result').html(
$(this).val()+ cnt+'번 클릭하셨습니다');
} );
//btn2 클릭시 btn1클릭이벤트 중단 (off함수를 이용)==> button에 click이벤트를 때어냈다가
$('#btn2').on('click',
function(){
$('#btn1').off('click'); //btn2버튼을 누르면, btn1을 중단.
});
//btn3 클릭시 한 번만 이벤트 발생 (btn3->btn1클릭)
$('#btn3').on('click',
function(){
$('#btn1').one('click', //.one함수는 한번씩만 실행되는 함수
function(){
alert('한 번만 말할테니 잘 들으세요');
});
});
}//function-end
);
</script>
</head>
<body>
<input id='btn1' type="button" value="클릭버튼"> <!-- 누를때마다 -->
<input id='btn2' type="button" value="클릭중단버튼">
<input id='btn3' type="button" value="한번클릭"> <!-- 한번만 -->
<div id='result'></div>
</body>
</html>
|
더보기
<결과보기>
'WEB 기초 > Jquery' 카테고리의 다른 글
| 7. navigator를 이용한 현재 위도,경도 출력하기 (0) | 2018.04.21 |
|---|---|
| 6. 이미지나열 이벤트 & 타이머 (심화문제) (0) | 2018.04.21 |
| 4. jquery 이벤트 총정리 (on, off, one, click, mouseover, mouseout) (0) | 2018.04.18 |
| 3. Css 제어_응용하기 (0) | 2018.04.16 |
| 2. 선택자를 이용해서 css 적용하기 (0) | 2018.04.16 |