티스토리 뷰

[개발]프로그래밍/jquery

[jquery] off() , one() - 이벤트 제거

좋은 블로그 2016. 10. 17. 09:08

1. off(),one() - 역할

두 개의 실행 결과는 같음

 

한번만 실행을 하고 더 이상 이벤트를 실행하지 않음


하지만, 명백한 차이점


off() - 이벤트를 제거


one() - 이벤트를 한 번만 실행


2. off() - 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h1').click(function(){
        
        $(this).css('color','blue');
        alert("h1이 파란색으로 변함");

        $(this).off();
    });
});
</script>
 
<body>
    <h1>test1</h1>
    <h2>test2</h2>
</body>




◈ 결과화면




◈ 설명


off()가 존재하지 않을 경우 alert 창이 누를 때마다 나오겠지만 off() 가 존재함으로 위와 같은 alert  창은 한번만 나오게 됩니다




3. one() - 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h1').one('click',function(){
        
        $(this).css('color','blue');
          alert("h1이 파란색으로 변함");
    });
});
</script>
 
<body>
        <h1>test1</h1>
        <h2>test2</h2>
</body>




◈ 결과화면




◈ 설명


결과 화면을 보게 된다면 off() 와 같지만 one() 은 엄연히 딱 한번만 실행하라는 의미합니다


둘 중에 하나만 써도 그 결과는 같습니다






'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] 마우스 - 이벤트 정리  (0) 2016.10.20
[jquery] stopPropagation() - 이벤트 전달을 제거  (0) 2016.10.17
[jquery] hover() - 마우스가 올라왔을 때,떠났을 때  (0) 2016.10.17
[jquery] clone - 객체 복제  (0) 2016.10.14
[jquery] after ,before - 객체 삽입  (0) 2016.10.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday