그룹 이벤트 등록 및 삭제하기

728x90

728x170

* 그룹 이벤트 등록 메서드

- 그룹 이벤트 등록 메서드를 상요하면 한 번에 2개 이상의 이벤트를 등록할 수 있음.

- 예를 들어, 선택한 요소에 메서드를 한 번만 적용하여 '마우스를 올렸을 때'와 '포커스가 생생되었을 때'와 같이 두 이벤트가 발생되도록 만들 수 있음.

- 그룹 이벤트 등록 메서드의 종류

종류	설명
on()	선택한 요소에 한 개 이상의 이벤트를 등록할 수 있음. 그리고 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트가 등록됨. 이 메서드는 제이쿼리 1.7 버전 이상부터 지원하고 있음.
bind()	선택한 요소에 한 개 이상의 이벤트를 등록할 수 있음.
delegate()	선택한 요소의 지정한 하위 요소에 이벤트를 등록함. 이벤트를 등록한 이후에 동적으로 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트가 등록됨.
live()	선택한 요소에 한 개 이상의 이벤트를 등록할 수 있으며, 이벤트 등록된 이후에 동적으로 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트가 등록됨. 이 메서드는 제이쿼리 1.9 버전부터는 지원하지 않음.
one()	선택한 요소에 이벤트를 등록하며, 단 한 번만 이벤트가 발생됨.

(1) on() 이벤트 등록 메서드

- 여러 개의 이벤트를 등록할 때 사용함.

- 제이쿼리 1.7 버전부터 지원하고 있음.

- on() 이벤트 등록 메서드를 어떻게 사용하느냐에 따라, 이벤트를 등록한 이후에 동적으로 생성된 이벤트가 등록된 요소와 같은 새 요소에도 동일한 이벤트가 적용됨

- 기본형

1. $(요소 선택).on("이벤트 종류 1, 이벤트 종류 2, ..., 이벤트 종류 n", function(){...}); // 선택한 요소에 여러 개의 이벤트를 등록함.

2. $(요소 선택).on({ // 선택한 요소에 여러 개의 이벤트를 등록하고, 이벤트 발생 종류에 따라 각 이벤트 핸들러가 실행됨.

"이벤트 종류 1":function(){...},

"이벤트 종류 2":function(){...}

...

"이벤트 종류 n":function(){...}

});

3. $(document).on("이벤트 종류 1, 이벤트 종류 2, ..., 이벤트 종류 n", "요소 선택", function(){...});

// 선택한 요소뿐만 아니라 이벤트 등록 이후에 동적으로 생성된 이벤트 등록된 요소와 동일한 새 요소에도 이벤트가 등록됨.

- 예)

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

<!-- 문단 태그 영역 -->
<body>
    <h1><a href="#">버튼</a></h1>
    <h2></h2>
</body>
 
<!-- 메서드 적용 -->
<script type="text/javascript">
    $(function(){
       $("h1 a").on({  //(a)
           "mouseover focus":function(){  
            // (a)에 마우스를 올리거나 포커스가 이동되었을 때 function(){...}의 실행문 실행
               $(this).css("color","red"); // (a)의 글자를 빨간색으로 적용
           },
           "mouseout blur":function(){      
            // (a)에서 마우스가 벗어나거나 포커스가 다른 요소로 이동되었을 때 function(){...}의 실행문 실행
               $(this).css("color", "yellow"); // (a)의 글자를 노란색으로 적용
           }
       });
 
       $("h2 a").on("mouseover focus", function(){  
        // (b) (b)에 마우스를 올리거나 포커스가 이동되었을 때 function(){...}의 실행문 실행
           $(this).css("background-color", "yellow"); // (b)의 배경을 노란색으로 적용
       });
 
       $(document).on("mouseout blur", "h2 a", function(){ 
        // (c) c에서 마우스가 벗어나거나 포커스가 다른 요소로 이동되었을 때 function(){...}의 실행문 실행
           $(this).css("background-color","aqua"); // (c)의 배경을 아쿠아색으로 적용
       });
 
       $("h2").append("<a href='#'>생성된 요소</a>");    
        // <h2>에 새 요소를 위의 이벤트 등록보다 늦게 생성함.
    });
</script>
Colored by Color Scripter

cs

(2) bind() 이벤트 등록 메서드

- 선택한 요소에 여러 개의 이벤트를 등록하는 메서드.

- on() 이벤트 등록 메서드의 사용 방법과 비슷함.

- 하지만 bind() 이벤트 등록 메서드는 동적으로 생성된 새 요소에는 이벤트가 적용되지 않음

- 기본형

$(요소 선택).bind("이벤트 종류 1, 이벤트 종류 2, ..., 이벤트 종류 n", function(){...});

- 예)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- 문단 태그 영역 -->
<body>
    <h1><a href="#">내용</a></h1>
</body>
 
<!-- 메서드 적용 -->
<script type="text/javascript">
    $(function(){
      $("h1 a").bind("mouseover focus", function(){
        // <h1> 태그의 하위 <a> 태그에 마우스를 올리거나 포커스가 이동되었을 때 이벤트 핸들러의 실행문을 실행
        $(this).css("background-color", "yellow");
        // 이벤트가 발생한 <a>에 노란색 배경을 생성함.
      });
    });
</script>
Colored by Color Scripter

cs

(3) delegate() 이벤트 등록 메서드

- 선택한 요소의 하위 요소에 여러 개의 이벤트를 등록할 수 있음.

- 이벤트를 등록한 이후에 동적으로 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트가 등록됨.

- 기본형

$(상위 요소 선택).delegate("하위 요소 선택", "이벤트 종류 1, 이벤트 종류 2, ... , 이벤트 종류 n", function(){...});

- 예)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- 문단 태그 영역 -->
<body>
    <h1></h1>
</body>
 
<!-- 메서드 적용 -->
<script type="text/javascript">
    $(function(){
      $("h1").delegate("a","mouseover focus",function(){
          // <h1> 태그의 하위 <a> 태그에 마우스를 올리거나 포커스가 이동되었을 때 이벤트 핸들러의 실행문을 실행
          $(this).css("background-color", "yellow");
          // 이벤트가 발생한 <a>의 배경을 노란색으로 적용
      });
 
      $("h1").htmL("<a href='#'>내용</a>"); // <h1> 태그에 새 요소가 생성됨.
    });
</script>
Colored by Color Scripter

cs

(4) one() 이벤트 등록 메서드

- 선택한 요소에 이벤트를 등록함.

- 한번 이벤트가 발생되면 자동으로 등록된 이벤트가 제거되어 한 번밖에 사용할 수 없음.

- 기본형

$(요소 선택).one("이벤트 종류", function(){...});

- 예)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- 문단 태그 영역 -->
<body>
    <button>증가 버튼</button>
    <p>0</p>
</body>
 
<!-- 메서드 적용 -->
<script type="text/javascript">
    $(function(){
        var num=0;      // num에 초깃값 0 지정
        $("button").one("click", function(){  // [증가 버튼]을 클릭했을 때
            num++;  // 변수 num의 데이터를 1만큼 증가시킴.
            $("p").text(num);   // 변수 num에 데이터를 <p>의 텍스트로 출력
        })
    });
</script>
Colored by Color Scripter

cs

* 이벤트 제거 메서드

- 이벤트 제거 메서드를 사용하면 이전에 등록된 이벤트를 제거할 수 있음.

- 이벤트 제거 메서드 종류

종류	설명
off()	선택한 요소에 등록된 이벤트를 제거
unbind()	off()와 비슷한 기능의 메서드. 선택한 요소에 등록된 이벤트를 제거

* off() 이벤트 제거 메서드

- 선택한 요소에 등록된 이벤트를 제거함.

- 예를 들어, 마우스로 이동하는 공지사항 레이어(layer)를 만든다면, 지정한 요소 위에 마우스를 올려 버튼을 누른 상태에서(mousedown) 움직일 때 mousemove 이벤트를 발생시켜 커서의 X, Y의 좌푯값을 구해야 함. 그리고 마우스에서 손을 떼었을 때(mouseup)는 이동이 정지되어야 하므로, 이때는 mousemove 이벤트가 제거되어야 함.

- 이와 같이 지정한 요소에 등록한 특정 이벤트를 제거해야 할 때 off() 이벤트 제거 메서드가 사용됨.

- 기본형

1. $(요소 선택).off(); // 선택한 요소에 등록된 모든 이벤트를 제거함.

2. $(요소 선택).off("이벤트 종류"); // 선택한 요소에 등록된 이벤트 중 지정한 이벤트만 제거함.

- 예)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- 문단 태그 영역 -->
<body>
    <h1><a href="#">내용</a></h1>
    <button>이벤트 삭제</button>
</body>
 
<!-- 메서드 적용 -->
<script type="text/javascript">
    $(function(){
        $("h1 a").on("mouseover focus", function(){
            // <h1> 태그의 하위 <a> 태그에 마우스를 올리거나 포커스가 이동되었을 때 이벤트 핸들러의 실행문 실행
            $(this).css("background-color", "yellow"); // 이벤트가 발생한 <a> 태그의 배경을 노란색으로 적용
        });
 
        $("button").on("click", function(){ // 버튼을 클릭했을 때
            $("h1 a").off(); // 위의 <a> 태그의 이벤트가 제거됨.
        });
    });
</script>
Colored by Color Scripter

cs

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)

728x90

그리드형(광고전용)

저작자표시

'Programming > jQuery' 카테고리의 다른 글

bxSlider 플러그인 활용하기 (0)	2017.05.25
제이쿼리 UI 플러그인 (0)	2017.05.25
효과 제어 메서드 (0)	2017.05.24
효과 및 애니메이션 메서드 (0)	2017.05.24
자주 사용되는 기타 이벤트 메서드 (0)	2017.05.23
이벤트 등록 메서드 - 키보드 이벤트 (0)	2017.05.23
키보드 접근성을 위한 이벤트 등록법 (0)	2017.05.23
이벤트 등록 메서드 - 마우스 이벤트 (0)	2017.05.23